/* ==========================================================================
   TPR Comments — redesigned discussion (Phases 1 & 2)
   Loads AFTER the compiled theme CSS, so it overrides the stock .comment rules
   without touching style.css. Namespaced .tpr-c-*.
   Reuses Archivo (already self-hosted at /live-bar/fonts) for UI chrome.
   ========================================================================== */

/* Body serif — self-hosted Source Serif 4 (OFL), so the reading text renders
   identically everywhere instead of falling back to Times where Georgia is
   absent. Loaded only on comment pages; font-display:swap. */
@font-face{ font-family:'Source Serif 4'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
/* UI chrome — Archivo, reused from the live-strip deploy (system fallback). */
@font-face{ font-family:'Archivo'; font-weight:600; font-display:swap; src:url('/live-bar/fonts/archivo-600.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-weight:700; font-display:swap; src:url('/live-bar/fonts/archivo-700.woff2') format('woff2'); }

.tpr-comments{
  --c-ink:#1a1a1a; --c-muted:#6b6b6b; --c-faint:#8b8b86; --c-surface:#fff; --c-raise:#faf9f7;
  --c-line:#e6e4e0; --c-line-strong:#d8d6d0; --c-accent:#1d5fbf; --c-accent-dark:#17499a; --c-tint:#eef4fc;
  --c-pick:#f3f7fd; --c-staff:#1d5fbf; --c-sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --c-serif:'Source Serif 4',Georgia,'Times New Roman',serif; --c-mono:ui-monospace,'IBM Plex Mono',Menlo,Consolas,monospace;
  max-width:720px; margin:calc(3 * 1rem) auto; font-family:var(--c-serif); color:var(--c-ink);
}
@media (prefers-color-scheme:dark){
  .tpr-comments{ --c-ink:#e9e8e6; --c-muted:#a2a09b; --c-faint:#8a8883; --c-surface:#1b1b1b; --c-raise:#202020;
    --c-line:#2f2f2d; --c-line-strong:#3a3a37; --c-accent:#5fa0ff; --c-accent-dark:#8bbcff; --c-tint:#16233a;
    --c-pick:#161f2e; --c-staff:#5fa0ff; }
}

/* reset a few inherited theme comment rules that fight the new layout */
.tpr-comments .tpr-c-list, .tpr-comments .tpr-c-children{ list-style:none; margin:0; padding:0; }
.tpr-comments .tpr-c-list .avatar{ display:none; }
.tpr-comments button{ font-family:var(--c-sans); cursor:pointer; }

/* ---- header ---- */
.tpr-c-head-bar{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; padding-bottom:1rem; border-bottom:2px solid var(--c-ink); }
.tpr-c-title{ font-family:var(--c-sans); font-weight:700; font-size:1.35rem; letter-spacing:-.01em; margin:0; }
.tpr-c-count{ font-family:var(--c-mono); font-size:.95rem; color:var(--c-accent); }
.tpr-c-join{ margin-left:auto; font-family:var(--c-sans); font-weight:700; font-size:.82rem; color:#fff; background:var(--c-accent); border:0; border-radius:4px; padding:.5rem 1rem; }
.tpr-c-join:hover{ background:var(--c-accent-dark); }

/* ---- sort bar ---- */
.tpr-c-sortbar{ display:flex; align-items:center; gap:.25rem; padding:.7rem 0 1rem; font-family:var(--c-sans); }
.tpr-c-sortlbl{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-faint); margin-right:.4rem; }
.tpr-c-sort{ font-size:.8rem; font-weight:600; color:var(--c-muted); background:transparent; border:0; padding:.3rem .6rem; border-radius:4px; }
.tpr-c-sort.is-on{ color:var(--c-ink); background:var(--c-tint); }

/* ---- a comment ---- */
.tpr-c{ display:flex; gap:.85rem; padding:1.25rem 0; border-bottom:1px solid var(--c-line); }
.tpr-c-body{ min-width:0; flex:1; }
.tpr-c-av{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--c-sans); font-weight:700; font-size:.85rem; color:#fff; user-select:none; }
.tpr-c-av--staff{ background:var(--c-staff); }
.tpr-c-head{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.tpr-c-name{ font-family:var(--c-sans); font-weight:700; font-size:.92rem; color:var(--c-ink); }
.tpr-c-time,.tpr-c-time:visited{ font-family:var(--c-mono); font-size:.72rem; color:var(--c-faint); text-decoration:none; }
.tpr-c-time:hover{ color:var(--c-accent); }
.tpr-c-text{ font-family:var(--c-serif); font-size:1.02rem; line-height:1.62; margin:.35rem 0 .1rem; color:var(--c-ink); font-synthesis:none; }
.tpr-c-text strong,.tpr-c-text b{ font-weight:600; } /* real semibold face, no faux-bold */
.tpr-c-text > *:first-child{ margin-top:0; } .tpr-c-text > *:last-child{ margin-bottom:0; }
.tpr-c-text a{ color:var(--c-accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--c-accent) 35%,transparent); }
.tpr-c-text a:hover{ border-bottom-color:var(--c-accent); }
.tpr-c-text blockquote{ margin:.5rem 0; padding:.3rem 0 .3rem .9rem; border-left:3px solid var(--c-line-strong); color:var(--c-muted); }
.tpr-c-edited{ font-family:var(--c-sans); font-size:.72rem; font-style:italic; color:var(--c-faint); margin-left:.35rem; }

/* badges */
.tpr-c-badge{ font-family:var(--c-sans); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .4rem; border-radius:3px; }
.tpr-c-badge--staff{ background:var(--c-staff); color:#fff; }

/* action row */
.tpr-c-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; margin-top:.55rem; font-family:var(--c-sans); }
.tpr-c-react{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--c-line-strong); background:var(--c-surface);
  color:var(--c-muted); border-radius:999px; padding:.24rem .6rem; font-size:.78rem; font-weight:600; transition:all .12s ease; }
.tpr-c-react .tpr-c-arw{ font-size:.7rem; line-height:1; }
.tpr-c-react .tpr-c-n{ font-family:var(--c-mono); font-size:.76rem; }
.tpr-c-react .tpr-c-n:empty{ display:none; }
.tpr-c-react:hover{ border-color:var(--c-accent); color:var(--c-accent); }
.tpr-c-react.is-on{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.tpr-c-react--mini{ padding:.18rem .5rem; font-size:.72rem; border-color:var(--c-line); }
.tpr-c-act{ font-family:var(--c-sans); font-size:.78rem; font-weight:600; color:var(--c-muted); background:transparent; border:0; padding:.24rem .5rem; border-radius:4px; text-decoration:none; }
.tpr-c-act:hover{ color:var(--c-accent); background:var(--c-tint); }
.tpr-c-sep{ color:var(--c-line-strong); }
/* Edit carries its own separator so it appears/disappears cleanly with the
   button (revealed by JS only for the author, within the edit window). */
.tpr-c-edit::before{ content:"·"; color:var(--c-line-strong); margin-right:.35rem; }
.tpr-c-modbtn{ color:#b26a00; } .tpr-c-modbtn--on{ color:var(--c-accent); }

/* replies: one visual rail, no runaway indent */
.tpr-c-children{ margin:.4rem 0 0 0; padding-left:1.1rem; border-left:2px solid var(--c-line-strong); }
.tpr-c-children .tpr-c:last-child{ border-bottom:0; padding-bottom:.4rem; }
.tpr-c-toggle{ font-family:var(--c-sans); font-size:.8rem; font-weight:700; color:var(--c-accent); background:transparent; border:0; padding:.5rem 0 0; display:inline-flex; align-items:center; gap:.5rem; }
.tpr-c-toggle::before{ content:"▸"; font-size:.7rem; transition:transform .12s ease; }
.tpr-c-toggle.is-open::before{ transform:rotate(90deg); }
.tpr-c-replied{ font-family:var(--c-sans); font-size:.68rem; font-weight:700; color:var(--c-staff); background:var(--c-tint); padding:.1rem .4rem; border-radius:3px; letter-spacing:.02em; }

/* new-since-last-visit dot */
.tpr-c.is-new > .tpr-c-av::after{ content:""; position:absolute; margin:-4px 0 0 30px; width:9px; height:9px; border-radius:50%; background:#e0692b; box-shadow:0 0 0 2px var(--c-surface); }
.tpr-c{ position:relative; }

/* editor's pick */
.tpr-c-pick{ background:var(--c-pick); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); border-radius:0 6px 6px 0; padding:.2rem 1.1rem .4rem; margin:0 0 .5rem; }
.tpr-c-pick-tag{ font-family:var(--c-sans); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-accent); padding:.7rem 0 0; }
.tpr-c-pick .tpr-c{ border-bottom:0; }

/* :target highlight when arriving via a comment permalink */
.tpr-c:target{ animation:tpr-c-flash 2s ease; }
@keyframes tpr-c-flash{ 0%,40%{ background:var(--c-tint); box-shadow:-8px 0 0 var(--c-tint),8px 0 0 var(--c-tint);} 100%{ background:transparent; box-shadow:none;} }

/* empty / closed */
.tpr-c-empty{ font-family:var(--c-serif); font-size:1.05rem; color:var(--c-muted); padding:1.5rem 0; }
.tpr-c-empty strong{ color:var(--c-ink); }
.tpr-c-closed{ font-family:var(--c-sans); font-size:.85rem; color:var(--c-muted); }

/* ---- compose form ---- */
.tpr-c-form-wrap{ margin-top:2.4rem; padding-top:1.6rem; border-top:2px solid var(--c-ink); }
.tpr-cf .comment-reply-title,.tpr-cf-policy{ font-family:var(--c-sans); }
.tpr-cf .comment-reply-title{ font-weight:800; font-size:1.05rem; margin:0 0 .3rem; }
.tpr-cf-policy{ font-size:.78rem; color:var(--c-muted); margin:0 0 .9rem; }
.tpr-cf-policy a{ color:var(--c-accent); }
.tpr-cf-field{ margin:0 0 .8rem; }
.tpr-cf-field label{ font-family:var(--c-sans); font-size:.78rem; font-weight:600; color:var(--c-muted); display:block; margin-bottom:.25rem; }
.tpr-cf-req{ color:var(--c-accent); }
.tpr-cf-note{ font-family:var(--c-sans); font-size:.7rem; color:var(--c-faint); margin-left:.5rem; }
.tpr-cf input[type=text],.tpr-cf input[type=email],.tpr-cf textarea{ width:100%; padding:.6rem .75rem; font-family:var(--c-serif); font-size:1rem; color:var(--c-ink); background:var(--c-surface); border:1px solid var(--c-line-strong); border-radius:6px; }
.tpr-cf textarea{ min-height:110px; resize:vertical; line-height:1.55; }
.tpr-cf input:focus,.tpr-cf textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-tint); }
.tpr-cf-main{ position:relative; }
.tpr-cf-counter{ position:absolute; right:.6rem; bottom:.55rem; font-family:var(--c-mono); font-size:.7rem; color:var(--c-faint); background:var(--c-surface); padding:0 .2rem; }
.tpr-cf-counter.is-warn{ color:#c0392b; }
.tpr-cf-name-email{ display:flex; gap:.8rem; flex-wrap:wrap; }
.tpr-cf-name-email .tpr-cf-field{ flex:1 1 200px; }
.tpr-cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tpr-cf .form-submit{ margin:.3rem 0 0; }
.tpr-cf-submit,.tpr-cf .submit{ font-family:var(--c-sans); font-weight:700; font-size:.85rem; color:#fff; background:var(--c-accent); border:0; border-radius:5px; padding:.6rem 1.2rem; cursor:pointer; }
.tpr-cf-submit:hover,.tpr-cf .submit:hover{ background:var(--c-accent-dark); }

/* inline reply / edit boxes injected by JS */
.tpr-c-inline{ margin:.7rem 0 0; }
.tpr-c-inline textarea{ width:100%; min-height:72px; padding:.6rem .75rem; font-family:var(--c-serif); font-size:.98rem; color:var(--c-ink); background:var(--c-surface); border:1px solid var(--c-line-strong); border-radius:6px; }
.tpr-c-inline textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-tint); }
.tpr-c-inline-actions{ display:flex; gap:.6rem; align-items:center; margin-top:.5rem; }
.tpr-c-inline-post{ font-family:var(--c-sans); font-weight:700; font-size:.82rem; color:#fff; background:var(--c-accent); border:0; border-radius:5px; padding:.45rem 1rem; }
.tpr-c-inline-cancel{ font-family:var(--c-sans); font-weight:600; font-size:.8rem; color:var(--c-accent); background:transparent; border:0; }
.tpr-c-inline-note{ font-family:var(--c-sans); font-size:.72rem; color:var(--c-faint); }

@media (max-width:600px){
  .tpr-c-children{ padding-left:.7rem; }
  .tpr-c-actions{ gap:.15rem .3rem; }
}
@media (prefers-reduced-motion:reduce){ .tpr-c:target{ animation:none; background:var(--c-tint); } }