/**
 * Kindling Comments — Frontend Styles
 *
 * Mobile-first: base styles are mobile, desktop overrides via @media (min-width: 481px).
 * Zero !important — KC owns its entire DOM, no theme interference.
 *
 * @package Kindling_Comments
 * @version 1.5.4
 */

/* ------------------------------------------------------------------
 * CSS Custom Properties — Light mode defaults.
 * Override via Settings → Kindling Comments → Display tab.
 * ----------------------------------------------------------------*/
:root {
    --kindling-bg: #ffffff;
    --kindling-text: #333333;
    --kindling-meta: #777777;
    --kindling-border: #e8e8e8;
    --kindling-divider: #c0c0c0;
    --kindling-thread: #eeeeee;
    --kindling-accent: #0073aa;
    --kindling-accent-hover: #005a87;
    --kindling-vote-active: #0073aa;
    --kindling-badge-post-author: #2271b1;
    --kindling-badge-admin: #d63638;
    --kindling-badge-author: #6c757d;
    --kindling-highlight: rgba(0, 115, 170, 0.08);
    --kindling-form-bg: #ffffff;
    --kindling-btn-bg: #0073aa;
    --kindling-btn-text: #ffffff;
    --kindling-avatar-size: 48px;
    --kindling-radius: 4px;
    --kindling-transition: 0.2s ease;
}

/* Dark mode — scoped to comment section under body.darkmode.
 * The dark mode selector is configurable in settings. When changed,
 * inline CSS outputs the dark palette under the configured selector.
 * This static block handles the default body.darkmode case. */
body.darkmode .kindling-comments-section {
    --kindling-bg: #1a1a1a;
    --kindling-text: #e0e0e0;
    --kindling-meta: #888888;
    --kindling-border: #2a2a2a;
    --kindling-divider: #444444;
    --kindling-thread: #2a2a2a;
    --kindling-accent: #5caadb;
    --kindling-accent-hover: #7abde8;
    --kindling-highlight: rgba(92, 170, 219, 0.1);
    --kindling-form-bg: #2a2a2a;
    --kindling-btn-bg: #5caadb;
    --kindling-btn-text: #ffffff;
    --kindling-badge-post-author: #5caadb;
    --kindling-badge-admin: #f0625f;
    --kindling-badge-author: #8a939b;
    color-scheme: dark;
}

/* ------------------------------------------------------------------
 * Section container.
 * ----------------------------------------------------------------*/
.kindling-comments-section {
    max-width: 100%;
    color: var(--kindling-text);
    font-size: 16px;
    line-height: 1.6;
}

.kindling-comments-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--kindling-divider);
}

/* ------------------------------------------------------------------
 * Sort controls — <select> dropdown.
 * ----------------------------------------------------------------*/
.kindling-sort-controls {
    margin-bottom: 12px;
}

.kindling-sort-select {
    width: 100%;
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid var(--kindling-border);
    border-radius: var(--kindling-radius);
    background: var(--kindling-bg, #fff);
    color: var(--kindling-text);
    cursor: pointer;
    font-family: inherit;
}

/* ------------------------------------------------------------------
 * Comment list.
 * ----------------------------------------------------------------*/
.kindling-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------
 * Comment card — 2-column grid with named areas.
 *
 * <li> grid: toggle (20px) + comment (1fr).
 * <article> internal grid: meta/text/footer + avatar carve-out.
 * Avatar column auto-collapses when no avatar present.
 * Children <ol> and relocated #respond span full width.
 * ----------------------------------------------------------------*/
.kindling-comment {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-areas: "toggle comment";
    margin-top: 6px;
}

/* Divider between top-level siblings — full grid width. */
.kindling-comment + .kindling-comment {
    border-top: 2px solid var(--kindling-divider);
    padding-top: 6px;
}

/* Article — "comment" area, declares internal grid with named areas.
 * Avatar shares row 1 with meta. Text and footer span full width.
 * Auto column collapses to zero when no avatar present. */
.kindling-comment-body {
    grid-area: comment;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "meta avatar"
        "text text"
        "footer footer";
    min-width: 0;
}

.kindling-collapse-toggle  { grid-area: toggle; }
.kindling-comment-meta     { grid-area: meta; }
.kindling-comment-avatar   { grid-area: avatar; }
.kindling-comment-text     { grid-area: text; }
.kindling-comment-footer   { grid-area: footer; }

/* ------------------------------------------------------------------
 * Collapse toggle — grid area "toggle", top-aligned.
 *
 * Always visible on every comment. Collapse hides comment body
 * and children; meta row (author + timestamp) stays as summary.
 * ----------------------------------------------------------------*/
.kindling-collapse-toggle {
    justify-self: center;
    align-self: start;
    padding-top: 8px;
    background: none;
    border: none;
    color: var(--kindling-meta);
    cursor: pointer;
    font-size: 16px;
    font-family: monospace;
    line-height: 1;
    transition: color var(--kindling-transition);
}

.kindling-collapse-toggle:hover {
    color: var(--kindling-accent);
    background: none;
}

.kindling-collapse-toggle:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 1px;
    border-radius: 2px;
}

.kindling-collapse-icon {
    display: block;
    user-select: none;
}

/* Collapsed state — hide everything except meta row. */
.kindling-comment.kindling-collapsed > .kindling-comment-body .kindling-comment-text,
.kindling-comment.kindling-collapsed > .kindling-comment-body .kindling-comment-footer,
.kindling-comment.kindling-collapsed > .kindling-comment-body .kindling-comment-avatar {
    display: none;
}

/* Hide children when collapsed. */
.kindling-comment.kindling-collapsed > .kindling-children {
    display: none;
}

/* ------------------------------------------------------------------
 * Avatar — grid area "avatar", shares row 1 with meta.
 * Only rendered for logged-in commenters (user_id set).
 * When absent, auto column collapses to zero width.
 * WP core img classes (alignnone etc.) add margin — reset here.
 * ----------------------------------------------------------------*/
.kindling-comment-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    margin: 0;
}

/* ------------------------------------------------------------------
 * Comment meta (author, badges, time).
 * ----------------------------------------------------------------*/
.kindling-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    font-size: 13px;
}

.kindling-comment-author {
    font-weight: 600;
    color: var(--kindling-text);
}

.kindling-comment-author a {
    color: var(--kindling-text);
    text-decoration: none;
}

.kindling-comment-author a:hover {
    color: var(--kindling-accent);
}

.kindling-comment-time {
    color: var(--kindling-meta);
    font-size: 12px;
}

/* Badges — three tiers. */
.kindling-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 5px;
    border-radius: 2px;
    line-height: 1.7;
    color: #fff;
}

.kindling-badge-post-author {
    background: var(--kindling-badge-post-author);
}

.kindling-badge-admin {
    background: var(--kindling-badge-admin);
}

.kindling-badge-author {
    background: var(--kindling-badge-author);
}

/* ------------------------------------------------------------------
 * Comment text.
 * ----------------------------------------------------------------*/
.kindling-comment-text {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kindling-comment-text p:first-child {
    margin-top: 0;
}

.kindling-comment-text p:last-child {
    margin-bottom: 0;
}

.kindling-comment-text p {
    margin: 0 0 8px;
}

.kindling-comment-text blockquote {
    margin: 4px 0 8px 12px;
    padding: 6px 10px;
    background: var(--kindling-bg);
    border-left: 3px solid var(--kindling-border);
    border-radius: 0;
    font-size: 13px;
    color: var(--kindling-meta);
}

.kindling-moderation-notice {
    color: var(--kindling-meta);
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------
 * Pending comment styling (moderator view).
 * ----------------------------------------------------------------*/
.kindling-comment-pending > .kindling-comment-body {
    opacity: 0.75;
    border-left: 3px solid #f0b849;
    padding-left: 0.75rem;
}

.kindling-badge-pending {
    background: #f0b849;
    color: #333;
}

.kindling-mod-btn {
    background: none;
    border: 1px solid var(--kindling-border);
    border-radius: var(--kindling-radius);
    padding: 3px 10px 2px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    cursor: pointer;
    transition: all var(--kindling-transition);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: inherit;
    color: var(--kindling-text);
}

.kindling-mod-btn:hover {
    border-color: var(--kindling-accent);
    color: var(--kindling-accent);
}

.kindling-mod-btn:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 1px;
}

.kindling-mod-btn-approve {
    color: #2e7d32;
    border-color: #2e7d32;
}

.kindling-mod-btn-approve:hover {
    background: #2e7d32;
    color: #fff;
}

.kindling-mod-btn-spam {
    color: #e65100;
    border-color: #e65100;
}

.kindling-mod-btn-spam:hover {
    background: #e65100;
    color: #fff;
}

.kindling-mod-btn-trash {
    color: #c62828;
    border-color: #c62828;
}

.kindling-mod-btn-trash:hover {
    background: #c62828;
    color: #fff;
}

/* ------------------------------------------------------------------
 * Mod cog — approved comments, moderators only.
 * Gear icon in meta row, right-aligned. Dropdown on click.
 * ----------------------------------------------------------------*/
.kindling-mod-cog-wrapper {
    position: relative;
    margin-right: auto;
}

.kindling-mod-cog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    color: var(--kindling-meta);
    cursor: pointer;
    font: inherit;
    opacity: 0;
    transition: opacity var(--kindling-transition), color var(--kindling-transition);
}

.kindling-comment-body:hover .kindling-mod-cog,
.kindling-mod-cog:focus-visible,
.kindling-mod-cog-open .kindling-mod-cog {
    opacity: 1;
}

.kindling-mod-cog:hover {
    color: var(--kindling-text);
    background: none;
}

.kindling-mod-cog:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 1px;
    border-radius: 2px;
}

.kindling-mod-cog-icon {
    width: 14px;
    height: 14px;
}

.kindling-mod-cog-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    min-width: 140px;
    background: var(--kindling-bg);
    border: 1px solid var(--kindling-border);
    border-radius: var(--kindling-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
}

.kindling-mod-cog-open .kindling-mod-cog-dropdown {
    display: block;
}

.kindling-mod-cog-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    color: var(--kindling-text);
    cursor: pointer;
    transition: background var(--kindling-transition);
}

.kindling-mod-cog-item:hover {
    background: var(--kindling-highlight);
}

.kindling-mod-cog-item:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: -2px;
}

.kindling-mod-cog-item-disabled {
    color: var(--kindling-meta);
    opacity: 0.5;
    cursor: not-allowed;
}

.kindling-mod-cog-item-disabled:hover {
    background: none;
}

/* ------------------------------------------------------------------
 * Comment footer — user actions or mod actions (exclusive).
 * ----------------------------------------------------------------*/
.kindling-comment-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--kindling-meta);
}

.kindling-comment-mod-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Base action item — button reset for native <button> elements. */
.kindling-act {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--kindling-meta);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--kindling-transition);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
}

.kindling-act:hover {
    color: var(--kindling-text);
    background: none;
}

.kindling-act:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* SVG icons in action items. */
.kindling-act svg,
.kindling-act-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Report pushes to right edge of user-actions row. */
.kindling-report-link {
    margin-left: auto;
}

/* Share and Report — hidden until backend functionality is built. */
.kindling-share-link,
.kindling-report-link {
    display: none;
}

/* Vote buttons wrapper — flex child in the action row.
 * Contains up/down buttons and optional count spans.
 * Participates in parent gap naturally. */
.kindling-vote-buttons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Vote button — native <button>, reset. */
.kindling-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 0;
    color: var(--kindling-meta);
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    transition: color var(--kindling-transition);
}

.kindling-vote-icon {
    display: block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.kindling-vote-count {
    font-size: 12px;
}

.kindling-vote-btn:hover {
    color: var(--kindling-accent);
    background: none;
}

.kindling-vote-btn:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.kindling-vote-btn.kindling-vote-active {
    color: var(--kindling-vote-active);
}

.kindling-vote-btn.kindling-vote-active:hover {
    opacity: 0.8;
}

.kindling-vote-error {
    animation: kindling-vote-shake 0.3s ease;
}

@keyframes kindling-vote-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* Reply link — native <button>, no inner <a>. */
.kindling-reply-link:hover {
    color: var(--kindling-text);
}

/* ------------------------------------------------------------------
 * Threading — kindling-children.
 *
 * .kindling-children spans all grid columns (full width of parent <li>).
 * Indentation via margin-left on child <li> comments.
 * Thread border-left on the child <li> — runs alongside toggle + content.
 * ----------------------------------------------------------------*/
.kindling-children {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 2px;
}

.kindling-children > .kindling-comment {
    margin-left: 14px;
    border-left: 2px solid var(--kindling-thread);
    padding-left: 10px;
}

/* No top-level divider between children. */
.kindling-children .kindling-comment + .kindling-comment {
    border-top: none;
    padding-top: 0;
}

/* Trim bottom on last child. */
.kindling-children > .kindling-comment:last-child {
    padding-bottom: 2px;
}

/* ------------------------------------------------------------------
 * Polling notification bar.
 * ----------------------------------------------------------------*/
.kindling-poll-notice {
    background: var(--kindling-accent);
    color: #fff;
    text-align: center;
    padding: 0.6rem 1rem;
    border-radius: var(--kindling-radius);
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: background var(--kindling-transition);
}

.kindling-poll-notice:hover {
    background: var(--kindling-accent-hover);
}

/* ------------------------------------------------------------------
 * Loading indicator.
 * ----------------------------------------------------------------*/
.kindling-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0;
    color: var(--kindling-meta);
    font-size: 16px;
}

.kindling-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--kindling-border);
    border-top-color: var(--kindling-accent);
    border-radius: 50%;
    animation: kindling-spin 0.7s linear infinite;
}

@keyframes kindling-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
 * Load more button.
 * ----------------------------------------------------------------*/
.kindling-load-more-container {
    text-align: center;
    padding: 1rem 0;
}

.kindling-load-more-btn {
    background: none;
    border: 1px solid var(--kindling-border);
    border-radius: var(--kindling-radius);
    padding: 0.5rem 1.5rem;
    color: var(--kindling-accent);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--kindling-transition);
}

.kindling-load-more-btn:hover {
    background: var(--kindling-highlight);
    border-color: var(--kindling-accent);
}

.kindling-load-more-btn:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Numbered pagination.
 * ----------------------------------------------------------------*/
.kindling-page-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 0;
}

.kindling-page-btn {
    background: none;
    border: 1px solid var(--kindling-border);
    border-radius: var(--kindling-radius);
    padding: 0.35rem 0.65rem;
    font-size: 15px;
    font-family: inherit;
    color: var(--kindling-meta);
    cursor: pointer;
    transition: all var(--kindling-transition);
}

.kindling-page-btn:hover {
    color: var(--kindling-accent);
    border-color: var(--kindling-accent);
}

.kindling-page-btn:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 1px;
}

.kindling-page-btn.kindling-page-active {
    color: #fff;
    background: var(--kindling-accent);
    border-color: var(--kindling-accent);
}

/* ------------------------------------------------------------------
 * Scroll sentinel (invisible).
 * ----------------------------------------------------------------*/
.kindling-scroll-sentinel {
    height: 1px;
    visibility: hidden;
}

/* ------------------------------------------------------------------
 * New comment highlight animation.
 * ----------------------------------------------------------------*/
.kindling-new-comment {
    animation: kindling-highlight-fade 3s ease;
}

@keyframes kindling-highlight-fade {
    0%   { background-color: var(--kindling-highlight); }
    100% { background-color: transparent; }
}

/* ------------------------------------------------------------------
 * No comments / errors.
 * ----------------------------------------------------------------*/
.kindling-no-comments,
.kindling-error {
    text-align: center;
    padding: 2rem 0;
    color: var(--kindling-meta);
    font-style: italic;
}

.kindling-comments-closed {
    text-align: center;
    padding: 1rem 0;
    color: var(--kindling-meta);
    font-style: italic;
    border-top: 1px solid var(--kindling-border);
}

/* ------------------------------------------------------------------
 * Comment form — KC's own markup, all kindling-* selectors.
 * ----------------------------------------------------------------*/
.kindling-form-container {
    margin: 1.5rem 0;
}

.kindling-respond {
    position: relative;
}

/* Reply form spans full grid when relocated inside a comment by moveForm(). */
.kindling-comment > .kindling-respond {
    grid-column: 1 / -1;
    margin-top: 12px;
    margin-bottom: 8px;
}

.kindling-reply-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
}

.kindling-comments-section .kindling-comment-form textarea,
.kindling-comments-section .kindling-comment-form input[type="text"],
.kindling-comments-section .kindling-comment-form input[type="email"],
.kindling-comments-section .kindling-comment-form input[type="url"] {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--kindling-border);
    border-radius: var(--kindling-radius);
    background: var(--kindling-form-bg);
    color: var(--kindling-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color var(--kindling-transition);
    box-sizing: border-box;
}

.kindling-comments-section .kindling-comment-form textarea:hover,
.kindling-comments-section .kindling-comment-form input[type="text"]:hover,
.kindling-comments-section .kindling-comment-form input[type="email"]:hover,
.kindling-comments-section .kindling-comment-form input[type="url"]:hover {
    border-color: var(--kindling-meta);
    background: var(--kindling-form-bg);
    color: var(--kindling-text);
}

.kindling-comments-section .kindling-comment-form textarea:focus,
.kindling-comments-section .kindling-comment-form input[type="text"]:focus,
.kindling-comments-section .kindling-comment-form input[type="email"]:focus,
.kindling-comments-section .kindling-comment-form input[type="url"]:focus {
    outline: none;
    border-color: var(--kindling-accent);
    background: var(--kindling-form-bg);
    color: var(--kindling-text);
}

.kindling-comments-section .kindling-comment-form textarea::placeholder,
.kindling-comments-section .kindling-comment-form input[type="text"]::placeholder,
.kindling-comments-section .kindling-comment-form input[type="email"]::placeholder,
.kindling-comments-section .kindling-comment-form input[type="url"]::placeholder {
    color: var(--kindling-meta);
    opacity: 1;
}

.kindling-comments-section .kindling-comment-form textarea:focus::placeholder,
.kindling-comments-section .kindling-comment-form input[type="text"]:focus::placeholder,
.kindling-comments-section .kindling-comment-form input[type="email"]:focus::placeholder,
.kindling-comments-section .kindling-comment-form input[type="url"]:focus::placeholder {
    color: var(--kindling-meta);
    opacity: 0.6;
}

.kindling-comments-section .kindling-comment-form textarea:disabled,
.kindling-comments-section .kindling-comment-form input[type="text"]:disabled,
.kindling-comments-section .kindling-comment-form input[type="email"]:disabled,
.kindling-comments-section .kindling-comment-form input[type="url"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--kindling-form-bg);
    color: var(--kindling-text);
}

.kindling-comment-form textarea {
    min-height: 100px;
    resize: vertical;
}

.kindling-comment-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--kindling-text);
    margin-bottom: 4px;
}

.kindling-comment-form label .required {
    color: var(--kindling-accent);
}

.kindling-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kindling-field-comment {
    margin-bottom: 0.5rem;
}

.kindling-field-cookies {
    margin: 0.5rem 0;
    font-size: 14px;
    color: var(--kindling-meta);
}

.kindling-field-cookies label {
    display: inline;
    font-weight: normal;
    font-size: 14px;
    color: var(--kindling-meta);
}

.kindling-field-cookies input[type="checkbox"] {
    margin-right: 0.35em;
    vertical-align: middle;
}

.kindling-form-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.kindling-submit-btn {
    background: var(--kindling-btn-bg);
    color: var(--kindling-btn-text);
    border: none;
    border-radius: var(--kindling-radius);
    padding: 10px 32px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    line-height: 16px;
    cursor: pointer;
    transition: background var(--kindling-transition);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kindling-submit-btn:hover {
    opacity: 0.9;
}

.kindling-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kindling-submit-btn:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 2px;
}

.kindling-logged-in {
    font-size: 14px;
    color: var(--kindling-meta);
    margin-bottom: 0.75rem;
}

.kindling-logged-in a {
    color: var(--kindling-accent);
}

/* Form messages. */
.kindling-form-message {
    padding: 0.6rem 0.85rem;
    border-radius: var(--kindling-radius);
    margin-bottom: 0.75rem;
    font-size: 16px;
}

.kindling-form-message-error {
    background: #fef0f0;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.kindling-form-message-info {
    background: #f0f6fc;
    color: #2271b1;
    border: 1px solid #c3ddf0;
}

body.darkmode .kindling-comments-section .kindling-form-message-error {
    background: #3a1a1a;
    color: #f0625f;
    border-color: #5a2a2a;
}

body.darkmode .kindling-comments-section .kindling-form-message-info {
    background: #1a2a3a;
    color: #5caadb;
    border-color: #2a3a4a;
}

/* Spam service notice. */
.kindling-spam-notice {
    color: var(--kindling-meta);
    font-size: 14px;
    margin: 0.5rem 0 0;
}

.kindling-spam-notice a {
    color: var(--kindling-accent);
}

/* Cancel reply link — styled via class, ID kept for moveForm contract. */
.kindling-cancel-reply {
    color: var(--kindling-meta);
    font-size: 15px;
    margin-left: 0.5rem;
    text-decoration: none;
}

.kindling-cancel-reply:hover {
    color: var(--kindling-accent);
}

/* Turnstile widget wrapper. */
.kindling-turnstile-wrapper {
    margin: 0.75rem 0;
}

/* Honeypot — accessible hiding. */
.kindling-hp-field {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

/* Akismet privacy notice — suppressed by Kindling's own toggle. */
.kindling-comments-section .akismet_comment_form_privacy_notice {
    display: none;
}

/* Third-party plugin field isolation. */
.kindling-third-party-fields {
    margin: 0.5rem 0;
}

/* ------------------------------------------------------------------
 * Formatting toolbar.
 * ----------------------------------------------------------------*/
.kindling-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid var(--kindling-border);
    border-bottom: none;
    border-radius: var(--kindling-radius) var(--kindling-radius) 0 0;
    background: var(--kindling-form-bg);
}

.kindling-toolbar + textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.kindling-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--kindling-meta);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    padding: 0;
    transition: all var(--kindling-transition);
}

.kindling-toolbar-btn:hover {
    background: var(--kindling-highlight);
    border-color: var(--kindling-border);
    color: var(--kindling-text);
}

.kindling-toolbar-btn:focus-visible {
    outline: 2px solid var(--kindling-accent);
    outline-offset: 1px;
}

.kindling-toolbar-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.kindling-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--kindling-border);
    margin: 3px 4px;
    align-self: center;
}

/* ------------------------------------------------------------------
 * Subscription Checkboxes (Layer 2).
 * ----------------------------------------------------------------*/
.kindling-subscribe-checkboxes {
    margin: 0.75rem 0;
}

.kindling-subscribe-label {
    display: block;
    font-size: 0.85em;
    color: var(--kindling-meta);
    line-height: 1.8;
    cursor: pointer;
}

.kindling-subscribe-label input[type="checkbox"] {
    margin-right: 0.35em;
    vertical-align: middle;
}

/* ------------------------------------------------------------------
 * Reduced motion — respect user preference.
 * ----------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    .kindling-new-comment {
        animation: none;
    }

    .kindling-vote-error {
        animation: none;
    }

    .kindling-spinner {
        animation: none;
    }

    * {
        transition-duration: 0.01ms;
    }
}

/* ------------------------------------------------------------------
 * Desktop overrides (min-width: 481px).
 * ----------------------------------------------------------------*/
@media (min-width: 481px) {
    .kindling-comments-title {
        font-size: 20px;
    }

    .kindling-sort-controls {
        display: flex;
        justify-content: flex-end;
    }

    .kindling-sort-select {
        width: auto;
        font-size: 13px;
        padding: 5px 28px 5px 10px;
    }

    .kindling-comment-meta {
        font-size: 14px;
    }

    .kindling-comment-time {
        font-size: 13px;
    }

    .kindling-comment-text {
        font-size: 15px;
        line-height: 1.55;
    }

    .kindling-comment-text blockquote {
        margin-left: 16px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .kindling-children > .kindling-comment {
        margin-left: 24px;
        padding-left: 16px;
    }

    .kindling-form-fields {
        flex-direction: row;
        gap: 0.75rem;
    }

    .kindling-form-fields > div {
        flex: 1;
    }
}