/* ============================================================================
   DEVIT COMMENTS  ·  v1   ("the thread as a log")
   Loaded after devit-cards.css. Everything is scoped under #post-page-view so it
   beats the <style id="devit-postpage-styles"> block app.js injects at runtime.

   · Entries are ruled, not carded. A hairline between top-level comments only.
   · Metadata (handle, time, score) is mono; the words are the loudest thing.
   · A reply hangs off its parent on a 1px rail with an elbow. No gradients, no glow.
   · FLARE marks the human action state (your vote, focus, send). Nothing else.
   · Edit / delete stay out of the way until you hover or focus the comment.
   · Tokens only, so light and dark themes both work.
   ========================================================================== */

/* ── 1. Thread header ───────────────────────────────────────────────────── */
#post-page-view .pp-comments-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--text-muted);
}
#post-page-view .pp-comments-head > span::before { content: '// '; color: var(--cyan); }
#post-page-view .pp-comments-head b { color: var(--text-primary); font-weight: 800; }
#post-page-view .pp-sort { margin-left: auto; display: flex; gap: 14px; }
#post-page-view .pp-sort button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 4px 0 3px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  color: var(--text-muted); cursor: pointer; text-transform: lowercase;
}
#post-page-view .pp-sort button:hover { color: var(--text-primary); }
#post-page-view .pp-sort button.active { color: var(--text-primary); border-bottom-color: var(--cyan); background: none; }

/* ── 2. Entries ─────────────────────────────────────────────────────────── */
#post-page-view #pp-comment-list > .pp-cmt-node { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
#post-page-view #pp-comment-list > .pp-cmt-node:last-child { border-bottom: 0; }
#post-page-view .pp-cmt {
  gap: 12px; padding: 14px 16px 4px; border-bottom: 0;
}
#post-page-view .pp-cmt-main { padding-bottom: 2px; }

#post-page-view .pp-cmt-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; row-gap: 0; }
#post-page-view .pp-cmt-author { font-weight: 700; letter-spacing: -0.005em; }
#post-page-view .pp-cmt-handle { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
#post-page-view .pp-cmt-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
#post-page-view .pp-cmt-time::before { content: '·'; margin-right: 8px; }
#post-page-view .pp-cmt-op {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em;
  color: var(--cyan); border: 1px solid var(--border-active); border-radius: 3px; padding: 0 5px; line-height: 15px;
}
#post-page-view .pp-cmt-text { font-size: 14.5px; line-height: 1.6; margin-top: 4px; }
#post-page-view .pp-cmt-text pre {
  background: var(--bg-void); border: 1px solid var(--border); border-left: 2px solid var(--cyan);
  border-radius: var(--radius-md, 6px); padding: 10px 12px; margin: 8px 0 2px; font-size: 12.5px;
}
#post-page-view .pp-cmt-text :not(pre) > code {
  font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-elevated);
  border-radius: 3px; padding: 1px 5px; color: var(--text-code);
}
#post-page-view .pp-edited { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; }
#post-page-view .pp-deleted .pp-cmt-text { font-family: var(--font-mono); font-size: 12px; }
#post-page-view .pp-cmt--op .pp-cmt-pfp { outline: 1px solid var(--border-active); outline-offset: 2px; }

/* Replies get a smaller avatar so the hierarchy reads at a glance. */
#post-page-view .pp-replies .pp-cmt { padding: 10px 0 2px 0; gap: 10px; }
#post-page-view .pp-replies .pp-cmt-pfp { width: 24px !important; height: 24px !important; font-size: 10px !important; }
#post-page-view .pp-replies .pp-cmt-text { font-size: 14px; }

/* ── 3. Actions ─────────────────────────────────────────────────────────── */
#post-page-view .pp-cmt-actions { display: flex; align-items: center; gap: 2px; margin: 4px 0 0 -6px; flex-wrap: wrap; }
#post-page-view .pp-act {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  padding: 4px 8px; min-height: 28px; border-radius: 4px; gap: 6px;
}
#post-page-view .pp-act:hover { background: var(--bg-elevated); color: var(--text-primary); }
#post-page-view .pp-act:focus-visible { outline-offset: 0; }
#post-page-view .pp-act i { font-size: 12px; }
#post-page-view .pp-act-icon { padding: 4px 7px; }
#post-page-view .pp-act-danger:hover { background: rgba(var(--flare-rgb), 0.10); color: var(--rose); }

/* Votes: no pill, just ▲ n ▼ in mono. Flare = your vote. */
#post-page-view .pp-vote { border: 0; padding: 0; gap: 0; margin-right: 6px; border-radius: 4px; }
#post-page-view .pp-vote button {
  width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 14px; color: var(--text-muted); transform: none;
}
#post-page-view .pp-vote button:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text-primary); }
#post-page-view .pp-vote button.up.on { color: var(--cyan); transform: none; }
#post-page-view .pp-vote button.down.on { color: var(--text-primary); transform: none; }
#post-page-view .pp-score { font-family: var(--font-mono); font-size: 12px; font-weight: 800; min-width: 1.6em; color: var(--text-secondary); }
#post-page-view .pp-vote:has(button.up.on) .pp-score { color: var(--cyan); }

/* Edit/delete: quiet until the comment is hovered or focused (always visible on touch). */
@media (hover: hover) {
  #post-page-view .pp-act-icon { opacity: 0; transition: opacity 0.12s; }
  #post-page-view .pp-cmt:hover .pp-act-icon,
  #post-page-view .pp-cmt:focus-within .pp-act-icon { opacity: 1; }
}

/* ── 4. Replies: one hairline rail, an elbow per child ──────────────────── */
#post-page-view .pp-replies { margin-left: 31px; padding-left: 16px; position: relative; border: 0 !important; }
#post-page-view .pp-replies .pp-replies { margin-left: 11px; }
#post-page-view .pp-replies.pp-replies-flat { margin-left: 0; padding-left: 12px; }
#post-page-view .pp-thread-line { left: 0; top: 0; bottom: 14px; width: 14px; }
#post-page-view .pp-thread-line::before {
  left: 0; top: 0; bottom: 0; width: 1px; border-radius: 0; background: var(--border-mid);
  box-shadow: none; transition: background-color 0.12s;
}
#post-page-view .pp-thread-line::after { display: none; }
#post-page-view .pp-thread-line:hover::before,
#post-page-view .pp-thread-line:focus-visible::before { width: 1px; background: var(--cyan); box-shadow: none; }
#post-page-view .pp-thread-line:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
#post-page-view .pp-replies > .pp-cmt-node::before {
  content: ''; position: absolute; left: -16px; top: 22px; width: 12px; height: 1px; background: var(--border-mid);
}
#post-page-view .pp-replies.pp-replies-flat > .pp-cmt-node::before { display: none; }

/* Collapsed branch summary */
#post-page-view .pp-thread-toggle {
  margin: 2px 0 8px 44px; padding: 3px 9px; background: transparent; border: 1px solid var(--border-mid);
  border-radius: 3px; font-size: 11px; color: var(--text-secondary);
}
#post-page-view .pp-thread-toggle:hover { color: var(--cyan); border-color: var(--border-active); }

/* "replying to" chip: only where nesting has stopped and the parent isn't directly above. */
#post-page-view .pp-replies:not(.pp-replies-flat) > .pp-cmt-node > .pp-cmt .pp-reply-ref { display: none; }
#post-page-view .pp-reply-ref {
  background: none; border: 0; border-left: 2px solid var(--border-mid); border-radius: 0;
  padding: 1px 0 1px 8px; margin: 0 0 4px; font-family: var(--font-mono); font-size: 11px;
}
#post-page-view .pp-reply-ref:hover { background: none; border-left-color: var(--cyan); }
#post-page-view .pp-reply-ref > i { display: none; }
#post-page-view .pp-reply-ref-name { color: var(--text-secondary); }

/* ── 5. Empty + loading ─────────────────────────────────────────────────── */
#post-page-view .pp-empty { padding: 36px 16px 40px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: left; max-width: 680px; }
#post-page-view .pp-empty b { display: block; color: var(--text-primary); font-size: 13px; margin-bottom: 4px; }

/* ── 6. Composer (docked) ───────────────────────────────────────────────── */
#post-page-view .pp-composer {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--bg-base); border-top: 1px solid var(--border-mid);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
#post-page-view .pp-composer::before { display: none; }
#post-page-view #pp-comp-box,
#post-page-view #pp-comp-box:focus-within,
#post-page-view #pp-comp-box.expanded,
#post-page-view #pp-comp-box.code {
  border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border-mid);
}
#post-page-view #pp-comp-box:focus-within { border-color: var(--border-active); }
#post-page-view #pp-comp-box textarea { padding: 11px 8px 11px 14px; font-size: 14.5px; }
#post-page-view #pp-comp-box.code textarea { font-family: var(--font-mono); font-size: 13px; }
#post-page-view #pp-comp-box .pp-comp-icon-btn { width: 32px; height: 32px; border-radius: 6px; font-size: 14px; }
#post-page-view #pp-comp-box .pp-comp-icon-btn.active { color: var(--cyan); background: var(--cyan-dim); }
#post-page-view #pp-comp-box .pp-comp-send-wrap { padding-right: 6px; }
#post-page-view #pp-comp-box .pp-comp-send { width: 32px; height: 32px; border-radius: 6px; font-size: 14px; color: var(--text-muted); background: none; }
#post-page-view #pp-comp-box .pp-comp-send:not(:disabled) { background: var(--cyan); color: var(--on-flare); }
#post-page-view #pp-comp-box .pp-comp-send:not(:disabled):hover { background: var(--cyan); filter: brightness(1.1); }
#post-page-view .pp-comp-hint { font-family: var(--font-mono); font-size: 10.5px; text-align: left; letter-spacing: 0; padding-left: 2px; }

/* Reply + edit boxes: same language as the docked composer. */
#post-page-view .pp-reply-box.pp-comp-box,
#post-page-view .pp-edit-box.pp-comp-box {
  border: 1px solid var(--border-mid); border-radius: 8px; background: var(--bg-surface); margin-top: 8px;
}
#post-page-view .pp-reply-box.pp-comp-box:focus-within,
#post-page-view .pp-edit-box.pp-comp-box:focus-within { border-color: var(--border-active); }
#post-page-view .pp-comp-box textarea { font-size: 14px; }
/* The box border already shows focus; drop the extra global outline on the field itself. */
#post-page-view .pp-comp-box textarea:focus-visible { outline: none; }
#post-page-view .pp-comp-bar { border-top: 1px solid var(--border); padding: 6px; gap: 6px; }
#post-page-view .pp-comp-tool {
  font-family: var(--font-mono); font-size: 11.5px; border: 0; border-radius: 6px; min-height: 30px; padding: 4px 9px; color: var(--text-muted);
}
#post-page-view .pp-comp-tool:hover { background: var(--bg-elevated); color: var(--text-primary); }
#post-page-view .pp-reply-cancel { margin-right: auto; }
#post-page-view .pp-comp-bar .pp-comp-send {
  margin-left: 0; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; min-height: 30px; padding: 4px 12px;
  background: var(--cyan); color: var(--on-flare);
}
#post-page-view .pp-comp-bar .pp-comp-send:disabled { background: var(--bg-elevated); color: var(--text-muted); opacity: 1; }

/* ── 7. Phones ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #post-page-view .pp-cmt { padding: 12px 14px 4px; gap: 10px; }
  #post-page-view .pp-cmt-handle { display: none; }
  #post-page-view .pp-replies { margin-left: 27px; padding-left: 10px; }
  #post-page-view .pp-replies > .pp-cmt-node::before { left: -10px; width: 6px; }
  #post-page-view .pp-replies .pp-replies { margin-left: 6px; }
  #post-page-view .pp-replies.pp-replies-flat { padding-left: 8px; }
  #post-page-view .pp-thread-toggle { margin-left: 38px; }
  #post-page-view .pp-act { min-height: 36px; padding: 6px 10px; }
  #post-page-view .pp-vote button { width: 34px; height: 34px; }
  #post-page-view .pp-composer { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { #post-page-view .pp-act-icon { transition: none; } }