/* Equal columns keep both directions balanced; the SVGs share one outline. */
.cpk-vote { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:0 12px; width:max-content; max-width:100%; margin:16px 0 12px; font:inherit; }
.cpk-vote .cpk-vote-button { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:52px; min-height:38px; margin:0; padding:6px; border:0; border-radius:3px; background:transparent; box-shadow:none; color:#858585; font:inherit; font-size:13px; line-height:1; cursor:pointer; touch-action:manipulation; transition:color .15s ease; }
.cpk-vote .cpk-vote-count { min-width:1ch; color:#707070; font-variant-numeric:tabular-nums; text-align:center; }
.cpk-vote .cpk-vote-icon { display:block; flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cpk-vote [data-vote-sign="-1"] .cpk-vote-icon { transform:rotate(180deg); }
.cpk-vote .cpk-vote-button[aria-pressed="true"], .cpk-vote .cpk-vote-button[aria-pressed="true"] .cpk-vote-count { color:#222; }
.cpk-vote .cpk-vote-button[aria-pressed="true"] .cpk-vote-icon { stroke-width:2.1; }
.cpk-vote .cpk-vote-button:focus-visible { outline:1px solid currentColor; outline-offset:2px; }
.cpk-vote .cpk-vote-button:disabled { cursor:default; opacity:.55; }
.cpk-vote[aria-busy="true"] .cpk-vote-button { cursor:wait; }
@media(hover:hover) { .cpk-vote .cpk-vote-button:not(:disabled):hover, .cpk-vote .cpk-vote-button:not(:disabled):hover .cpk-vote-count { color:#454545; } }
.cpk-vote .cpk-vote-label, .cpk-vote:not(.cpk-vote-has-error) .cpk-vote-message { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.cpk-vote.cpk-vote-has-error .cpk-vote-message { grid-column:1/-1; max-width:240px; margin-top:4px; font-size:12px; line-height:1.5; color:#555; overflow-wrap:anywhere; }
.cpk-vote--comment { gap:0 6px; margin:0; align-self:start; }
.cpk-vote--comment .cpk-vote-button { min-width:44px; min-height:32px; padding:4px; gap:5px; font-size:12px; }
.cpk-vote--comment .cpk-vote-icon { width:17px; height:17px; }

/* Only opted-in boards receive the compact comment layout. */
.feedback:not(.cpk-vote-comments) .cpk-comment-head { display:contents; }
.cpk-main .feedback.cpk-vote-comments .fbItem { padding-top:14px; padding-bottom:14px; }
.feedback.cpk-vote-comments .cpk-comment-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:12px; margin-bottom:8px; }
.cpk-main .board .feedback.cpk-vote-comments .fbMeta { float:none; width:auto; min-width:0; padding:0; }
.feedback.cpk-vote-comments .fbMeta .author { line-height:1.5; overflow-wrap:anywhere; }
.feedback.cpk-vote-comments .fbMeta .time { margin-top:2px; line-height:1.5; }
/* Existing author-flow.css uses !important for the old 200px author column. */
.cpk-main .board .feedback.cpk-vote-comments .fbItem > .xe_content { margin:0!important; padding:0; }
.feedback.cpk-vote-comments .xe_content > :last-child { margin-bottom:0; }
.feedback.cpk-vote-comments .fileList { margin-left:0; float:none; display:block; }
.feedback.cpk-vote-comments .action { float:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:8px 0 0; margin:0; white-space:normal; line-height:1.5; }
.feedback.cpk-vote-comments .action a { padding:0; }
.feedback.cpk-vote-comments .action a.this { margin:0; }

[data-cpk-scheme="dark"] .cpk-vote .cpk-vote-button, [data-cpk-scheme="dark"] .cpk-vote .cpk-vote-count { color:#969696; }
[data-cpk-scheme="dark"] .cpk-vote .cpk-vote-button[aria-pressed="true"], [data-cpk-scheme="dark"] .cpk-vote .cpk-vote-button[aria-pressed="true"] .cpk-vote-count { color:#f0f0f0; }
[data-cpk-scheme="dark"] .cpk-vote.cpk-vote-has-error .cpk-vote-message { color:#c7c7c7; }
@media(hover:hover) { [data-cpk-scheme="dark"] .cpk-vote .cpk-vote-button:not(:disabled):hover, [data-cpk-scheme="dark"] .cpk-vote .cpk-vote-button:not(:disabled):hover .cpk-vote-count { color:#d6d6d6; } }
@media(max-width:760px) {
    .cpk-vote .cpk-vote-button { min-height:44px; }
    /* Mobile comments share one compact flow; native actions and grants stay intact. */
    .cpk-main .board #comment .fbItem { padding:8px 0; margin:0; border-color:var(--cpk-line); min-width:0; }
    /* Keep the reply arrow inside a reserved gutter; use the same offset for every child. */
    .cpk-main .board #comment .fbItem.indent { --cpk-reply-offset:0px; margin-left:12px; padding-left:calc(var(--cpk-reply-offset) + 16px); background-position:var(--cpk-reply-offset) 12px; }
    .cpk-main .board #comment .fbItem.indent2 { --cpk-reply-offset:8px; }
    .cpk-main .board #comment .fbItem.indent3 { --cpk-reply-offset:16px; }
    .cpk-main .board #comment .fbItem.indent4 { --cpk-reply-offset:24px; }
    .cpk-main .board #comment .fbItem.indent5 { --cpk-reply-offset:32px; }
    .cpk-main .board #comment .fbItem.indent6 { --cpk-reply-offset:40px; }
    .cpk-main .board #comment .fbItem.indent7 { --cpk-reply-offset:48px; }
    .cpk-main .board #comment .fbItem.indent8 { --cpk-reply-offset:56px; }
    .cpk-main .board #comment .fbItem.indent9 { --cpk-reply-offset:64px; }
    .cpk-main .board #comment .fbItem.indent10 { --cpk-reply-offset:72px; }
    .cpk-main .board #comment .fbItem.indent11 { --cpk-reply-offset:80px; }
    .cpk-main .board #comment .fbItem.indent12 { --cpk-reply-offset:88px; }
    .cpk-main .board #comment .cpk-comment-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:6px; margin-bottom:4px; }
    .cpk-main .board #comment .fbMeta { float:none; width:auto; min-width:0; min-height:0; padding:0; }
    .cpk-main .board #comment .fbMeta .profile { margin-bottom:0; }
    .cpk-main .board #comment .fbMeta .author { margin:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
    .cpk-main .board #comment .fbMeta .time { margin:4px 0 0; font-size:11px; line-height:1.5; color:var(--cpk-muted); }
    .cpk-main .board #comment .cpk-vote--comment { gap:0; }
    .cpk-main .board #comment .cpk-vote-button { position:relative; min-width:44px; min-height:32px; gap:3px; padding:4px; font-size:12px; }
    .cpk-main .board #comment .cpk-vote-icon { width:15px; height:15px; }
    .cpk-main .board #comment .fbItem > .xe_content { padding:0; min-width:0; }
    .cpk-main .board #comment .fbItem > .xe_content > :last-child { margin-bottom:0; }
    .cpk-main .board #comment .action { float:none; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px 4px; padding:0; margin:6px 0 0; font-size:12px; line-height:1.5; white-space:normal; }
    .cpk-main .board #comment .action a { position:relative; display:inline-flex; justify-content:center; align-items:center; min-height:32px; min-width:44px; box-sizing:border-box; padding:0 2px; margin:0; color:var(--cpk-muted); }
    /* Transparent hit area: 32px visual rows retain 44px touch height, inside the gaps. */
    .cpk-main .board #comment :is(.cpk-vote-button,.action a)::after { content:""; position:absolute; inset:-6px 0; }
    .cpk-main .board #comment .action a.this { margin:0; }
    .cpk-main .board #comment .action a:focus-visible { outline:1px solid currentColor; outline-offset:-2px; }
    .cpk-main .board #comment .fileList { float:none; display:block; margin:0; padding-top:4px; }
    .cpk-main .board #comment .files { margin:4px 0; }
}
@media(prefers-reduced-motion:reduce) { .cpk-vote .cpk-vote-button { transition:none; } }

/* Outline the actual editable surface without changing its dimensions or the upload panel. */
.cpk-main .board .write_comment :is(.rx_simpleeditor[contenteditable="true"],.cke_wysiwyg_frame,.cke_wysiwyg_div,.cke_source) {
    border-radius:4px;
    outline:1px solid var(--cpk-line,#d4d4d4);
    outline-offset:-1px;
    background-color:var(--cpk-bg,#fff);
}
.cpk-main .board .write_comment .cke_focus :is(.cke_wysiwyg_frame,.cke_wysiwyg_div,.cke_source),
.cpk-main .board .write_comment :is(.rx_simpleeditor[contenteditable="true"],.cke_wysiwyg_div,.cke_source):focus {
    outline-color:var(--cpk-muted,#888);
}

/* Comment upload colors follow CPK's theme, including SimpleEditor without CKEditor. */
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-container {
    background:var(--cpk-surface,#242424); color:var(--cpk-ink,#e3e3e3);
    border-color:var(--cpk-line,#555); border-radius:4px;
}
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-dropzone {
    background:var(--cpk-surface,#242424); color:var(--cpk-ink,#e3e3e3); border-radius:inherit;
}
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-container.in .xefu-dropzone {
    background:var(--cpk-raised,#333); border-color:var(--cpk-focus,#ddd);
}
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-btn {
    background:var(--cpk-raised,#333); color:var(--cpk-ink,#e3e3e3);
    border-color:var(--cpk-line,#555); border-radius:4px; box-shadow:none;
}
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-btn:hover,
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-btn:active {
    background:var(--cpk-button,#444); color:var(--cpk-ink,#e3e3e3);
}
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-btn > :is(a,button,input,span) { color:inherit; }
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-btn:focus-within {
    outline:1px solid var(--cpk-focus,#ddd); outline-offset:2px;
}
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment :is(.upload_info,.xefu-dropzone-message,.xefu-progress-status,.xefu-file-info) { color:var(--cpk-muted,#b8b8b8); }
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-list a { color:var(--cpk-ink,#e3e3e3); }
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-list-images { border-color:var(--cpk-line,#555); }
html[data-cpk-scheme="dark"] .cpk-main .board .write_comment .xefu-list-files li.selected { background:var(--cpk-raised,#333); }