/* The post action row and the comment box: their one finish sheet (loaded after Paint, the same in every look). */

/* ---------------------------------------------------------------- F24 the comment box: one surface, the pane itself.
   A small avatar and one borderless field in a single row; "Post" is a bare text button that is there only while the field has words.
   No capsule, no second box for the field, no hairlines. The same row is the inline reply under a card (comments.js) and the post page's own box. */
html body.pk-obsidian .pk-cbox { display: grid; gap: var(--fin-2); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html body.pk-obsidian .pk-cbox-form {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--fin-3); width: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
html body.pk-obsidian .pk-cbox-form .pk-avatar { flex: none; width: 32px; height: 32px; margin: 6px 0 0; }
html body.pk-obsidian .pk-cbox-field {
  flex: 1 1 0; min-width: 0; box-sizing: border-box; height: auto; min-height: 44px; max-height: 130px; margin: 0; padding: 10px 0; resize: none; overflow-y: auto;
  border: 0; border-radius: var(--fin-r-sm); background: transparent; box-shadow: none; color: var(--pk-ink); font: inherit; font-size: 16px; line-height: 22px;
}
html body.pk-obsidian .pk-cbox-field::placeholder { color: var(--pk-muted); opacity: 1; }
/* Paint tints every field in the stage with a selector worth (0,7,3); this is the same chain plus the field's class, so the field is bare without an !important.
   Focus: the one ring on the field's own edge (finish.css) and, under it, a quiet 1px underline. Nothing at rest. */
html body.pk-obsidian .pk-stage :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea).pk-cbox-field { border-color: transparent; background: transparent; box-shadow: none; color: var(--pk-ink); }
html body.pk-obsidian .pk-stage :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea).pk-cbox-field:is(:focus, :focus-visible) { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
html body.pk-obsidian .pk-cbox-send {
  flex: none; align-self: flex-start; min-width: 44px; min-height: 44px; margin: 0 0 0 var(--fin-1); padding: 0 var(--fin-2); border: 0; border-radius: var(--fin-r-sm);
  background: none; box-shadow: none; color: var(--pk-accent-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
html body.pk-obsidian .pk-cbox-send[hidden] { display: none; }
html body.pk-obsidian .pk-cbox-send:disabled { opacity: .5; cursor: default; }
/* The lines that belong to the form (a reply target, an optional label, the status) sit above or below the row, aligned with the field. */
html body.pk-obsidian .pk-cbox-form > :is(.pk-reply-target, .pk-cbox-label, p[role="status"]) { flex: 0 0 100%; box-sizing: border-box; margin: 0; padding-left: calc(32px + var(--fin-3)); }
html body.pk-obsidian .pk-cbox-form > .pk-reply-target { min-height: 44px; padding-left: 0; }
html body.pk-obsidian .pk-cbox-form > .pk-reply-target[hidden] { display: none; }
html body.pk-obsidian .pk-cbox-form > .pk-cbox-label { display: flex; align-items: center; gap: var(--fin-2); min-height: 44px; color: var(--pk-muted); font-size: 13px; }
html body.pk-obsidian .pk-cbox-form > .pk-cbox-label { white-space: nowrap; }
html body.pk-obsidian .pk-cbox-form > .pk-cbox-label select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
html body.pk-obsidian .pk-cbox-form > p[role="status"] { order: 9; font-size: 13px; color: var(--pk-muted); }
html body.pk-obsidian .pk-cbox-form > p[role="status"]:empty { display: none; }
/* Quick prompts: there when the field is focused and empty, gone the moment there are words. */
html body.pk-obsidian .pk-cbox > .pk-quick-replies { display: none; margin: 0; padding: 0 0 0 calc(32px + var(--fin-3)); gap: var(--fin-2); }
html body.pk-obsidian .pk-cbox:focus-within:has(.pk-cbox-field:placeholder-shown) > .pk-quick-replies { display: flex; }
/* The closed, signed-out and no-@username lines take the same slot, without a frame. */
html body.pk-obsidian .pk-detail-comments > :is(.pk-reply-closed, .pk-reply-prompt) { margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 15px; color: var(--pk-muted); }
/* The Viewer's reply sheet (viewer.js draws it): the same row, the same bare "Post". */
html body.pk-obsidian .pk-viewer-reply { align-items: flex-start; gap: var(--fin-3); padding-top: 0; border-top: 0; }
html body.pk-obsidian .pk-viewer-reply .pk-viewer-reply-field { box-sizing: border-box; min-height: 44px; padding: 10px 0; border: 0; border-radius: var(--fin-r-sm); background: transparent; }
html body.pk-obsidian .pk-viewer-reply .pk-viewer-reply-field:is(:focus, :focus-visible) { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
html body.pk-obsidian .pk-viewer-reply .pk-viewer-reply-send { min-width: 44px; padding: 0 var(--fin-2); border: 0; border-radius: var(--fin-r-sm); background: none; color: var(--pk-accent-ink); font-size: 15px; font-weight: 700; }
html body.pk-obsidian .pk-viewer-reply:has(.pk-viewer-reply-field:placeholder-shown) .pk-viewer-reply-send { display: none; }

/* ---------------------------------------------------------------- F23b the post action row: one line of bare icons, the same on a card, the post page and in the Viewer.
   24px glyphs in 44px targets, counts as plain 14px text beside them, no fill, no border, no hover box. Save sits at the right edge.
   The grid tile's row is the other agent's (finish2) and is left as it is. */
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-inline: -10px; padding-inline: 0; }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > :is(button, a, span:not(.pk-engage-count)) {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--fin-1); min-width: 44px; min-height: 44px; margin-block: 0; margin-right: 0; padding: 0 var(--fin-2);
  border: 0; border-radius: var(--fin-r-sm); background: none; box-shadow: none; color: var(--pk-ink); font: 600 14px/1 var(--fs-font); font-variant-numeric: tabular-nums; text-decoration: none;
}
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > :is(button, a, span:not(.pk-engage-count)) :is(svg, .pk-icon, .pk-ico) { flex: none; width: 24px; height: 24px; }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) .pk-engage-count { font-size: 14px; font-weight: 600; line-height: 1; color: inherit; }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-share { margin-left: 0; }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-save { margin-left: auto; }
/* States are the glyph, never a box: the heart is ruby and filled, a saved post is a filled bookmark, an open comment panel is the same icon. */
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-heart[aria-pressed="true"] { color: var(--pk-heart); }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-reshare[aria-pressed="true"] { color: var(--pk-accent-ink); }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-save[aria-pressed="true"] { color: var(--pk-ink); }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-comments[aria-expanded="true"] { background: none; color: var(--pk-ink); }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-reshare--count { cursor: default; }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > button.pk-loading { opacity: .6; }
html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > .pk-engage-status { flex: 1 0 100%; min-height: 0; margin: 0; padding: 0 var(--fin-3) var(--fin-2); font-size: 13px; }
@media (hover: hover) {
  html body.pk-obsidian :is(.pk-post-card--feed .pk-engage, .pk-detail-actions) > :is(button, a):hover { filter: brightness(1.08); }
}
/* In a comment: Reply and Helpful are plain words. */
html body.pk-obsidian .pk-reply-tools :is(.pk-reply-respond, .pk-helpful) { min-height: 44px; padding: 0 var(--fin-3) 0 0; border: 0; border-radius: var(--fin-r-sm); background: none; box-shadow: none; color: var(--pk-muted); font: 600 13px/1 var(--fs-font); }
html body.pk-obsidian .pk-reply-tools .pk-helpful[aria-pressed="true"] { color: var(--pk-good); }
