/* ============================================================
   SHARED comment-thread styles — single source for the article
   page (article.php) AND the project/showcase page (project.php).
   Edit here once; both pages update. Loaded via comments_styles().
   ============================================================ */
.comments { margin-top: clamp(40px,7vh,80px); }
.comments__h { font-family: var(--font-display); text-transform:uppercase; font-size: clamp(1.3rem,3vw,1.8rem); margin-bottom:22px; }
.comments__n { font-size:.65em; color: hsl(var(--foreground)/0.5); margin-left:6px; }
/* live: appears when another visitor posts while you're reading the thread */
.comments__new { display:block; width:100%; margin:0 0 16px; padding:11px 16px; border:1px solid hsl(var(--foreground)/0.18);
  background: hsl(var(--foreground)/0.05); color: hsl(var(--foreground)/0.9); border-radius:12px; font:inherit; font-weight:700;
  cursor:pointer; text-align:center; transition:background .15s, transform .15s; animation:cmtNewIn .3s ease; }
.comments__new:hover { background: hsl(var(--accent-2)/0.14); border-color: hsl(var(--accent-2)/0.5); transform:translateY(-1px); }
.comments__new[hidden] { display:none; }
@keyframes cmtNewIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.comments__form, .comments__signin { background: hsl(var(--foreground)/0.04); border:1px solid hsl(var(--foreground)/0.1); border-radius:14px; padding:18px; margin-bottom:30px; }
.comments__as { font-size:13px; color: hsl(var(--foreground)/0.7); margin-bottom:10px; }
.comments__as a, .comments__signin a:not(.sbtn) { color: hsl(var(--accent-2)); text-decoration:underline; }
.comments__form textarea { width:100%; background: hsl(var(--background)); border:1px solid hsl(var(--foreground)/0.14); border-radius:10px; padding:12px; color: hsl(var(--foreground)); font-family:inherit; font-size:15px; resize:vertical; }
.comments__form textarea:focus { outline:none; border-color: hsl(var(--accent-2)); box-shadow:0 0 0 3px hsl(var(--accent-2)/0.18); }
.comments__form .pb-btn { margin-top:12px; cursor:pointer; font-family: var(--font-pixel); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border-radius:4px; box-shadow:3px 3px 0 0 hsl(var(--foreground)/0.28); }
.comments__msg { margin-left:12px; font-size:13px; }
.comments__msg.ok { color:#34c759; } .comments__msg.err { color:#ff6a8a; }
.comments__signin p { color: hsl(var(--foreground)/0.78); margin-bottom:14px; }
.comments__providers { display:flex; flex-wrap:wrap; gap:9px; }
.sbtn { display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:9px; font-size:13.5px; font-weight:600; background: var(--sc, hsl(var(--foreground)/0.1)); color: var(--st, #fff); border:1px solid transparent; transition: transform .12s ease, filter .12s ease; }
.sbtn svg { flex:none; }
.sbtn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sbtn--google { border-color: hsl(var(--foreground)/0.16); }
.sbtn--off { background: hsl(var(--foreground)/0.05); color: hsl(var(--foreground)/0.4); border:1px dashed hsl(var(--foreground)/0.18); cursor:not-allowed; }
.sbtn--off:hover { transform:none; filter:none; }
.sbtn--off svg { opacity:.5; }
/* local 79-team login (lock) */
.sbtn--team { background: hsl(var(--foreground)/0.06); color: hsl(var(--foreground)/0.9); border:1px solid hsl(var(--accent-2)/0.5); }
.sbtn--team:hover { border-color: hsl(var(--accent-2)); background: hsl(var(--accent-2)/0.12); }
.comments__none { font-size:13px; color: hsl(var(--foreground)/0.55); }
.comments__empty { color: hsl(var(--foreground)/0.55); }
/* fold older threads — show only the latest 1-2 until "show all" is clicked */
.cmt--folded { display: none !important; }
.comments__showall { display:block; width:100%; margin:0 0 16px; padding:11px 16px; border:1px solid hsl(var(--foreground)/0.16); background: hsl(var(--foreground)/0.05); color: hsl(var(--foreground)/0.85); border-radius:12px; font:inherit; font-weight:700; cursor:pointer; text-align:center; transition: background .15s, border-color .15s, transform .15s; }
.comments__showall:hover { border-color: hsl(var(--accent-2)/0.6); background: hsl(var(--accent-2)/0.12); transform: translateY(-1px); }

/* Reddit-style threaded comments. --cmt-line is a SOLID colour so the spine and the
   curve elbow can overlap seamlessly (no doubled/darker patches). */
.cmt { --cmt-line: hsl(210 10% 24%); position:relative; padding-top:12px; }
.cmt__head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cmt__toggle { width:18px; height:18px; flex:none; border-radius:50%; border:1px solid hsl(var(--foreground)/0.2); background: hsl(var(--foreground)/0.06); color: hsl(var(--foreground)/0.7); font-size:13px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.cmt__toggle:hover { background: hsl(var(--foreground)/0.16); color: hsl(var(--foreground)); border-color:transparent; }
.cmt__av { width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center; background: hsl(var(--foreground)/0.1); }
.cmt__av img { width:100%; height:100%; object-fit:cover; }
.cmt__av--anon { color: hsl(var(--foreground)/0.45); background: hsl(var(--foreground)/0.08); }
.cmt__name { font-weight:700; font-size:14px; color: hsl(var(--foreground)); }
.cmt__role { font-family: var(--font-pixel); font-size:8px; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:5px; color: var(--rc); border:1px solid var(--rc); background: hsl(var(--foreground)/0.04); }
.cmt__time { font-size:12px; color: hsl(var(--foreground)/0.45); }
.cmt__cnote { font-size:12px; color: hsl(var(--foreground)/0.5); }
.cmt__main { padding-left:34px; }
/* comment text size is controlled from CMS → Appearance (--comment-size, default 14px) */
.cmt__body { color: hsl(var(--foreground)/0.85); font-size: var(--comment-size, 14px); line-height:1.55; margin:4px 0 6px; }
.cmt__actions { margin-bottom:2px; display:flex; align-items:center; gap:4px; }
.cmt__reply { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color: hsl(var(--foreground)/0.6); cursor:pointer; padding:3px 8px; border-radius:6px; }
.cmt__reply:hover { color: hsl(var(--foreground)); background: hsl(var(--foreground)/0.07); }
/* per-comment management icons (report = everyone, eye = staff) */
.cmt__report { display:inline-flex; align-items:center; justify-content:center; width:26px; height:24px; border:none; background:none; cursor:pointer; color: hsl(var(--foreground)/0.42); border-radius:6px; padding:0; }
.cmt__report:hover { color:#ff6a8a; background: hsl(var(--foreground)/0.07); }
.cmt__report.is-reported { color:#ff6a8a; opacity:.85; cursor:default; }
/* "Reported" state (red flag, no re-reporting) */
.cmt__reported { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#ff5a7a; padding:3px 9px; border-radius:6px; background: rgba(255,90,122,0.12); }
/* removed-comment placeholder */
.cmt--gone > .cmt__main { padding-left:0; }
.cmt__gone { display:inline-flex; align-items:center; gap:8px; font-size:13px; color: hsl(var(--foreground)/0.45); background: hsl(var(--foreground)/0.04); border:1px dashed hsl(var(--foreground)/0.12); border-radius:10px; padding:10px 14px; margin:2px 0 6px; }
.cmt__gone svg { flex:none; opacity:.7; }
/* reviewed-safe badge (green flag, reporting closed) */
.cmt__reviewed { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#34c759; padding:3px 9px; border-radius:6px; background: rgba(52,199,89,0.12); }
/* staff show/hide toggle — clearly visible, labeled */
.cmt__vis { display:inline-flex; align-items:center; gap:5px; border:1px solid hsl(var(--accent-2)/0.5); background: hsl(var(--accent-2)/0.1); cursor:pointer; color: hsl(var(--accent-2)); border-radius:7px; padding:3px 10px; font-size:12px; font-weight:700; }
.cmt__vis:hover { background: hsl(var(--accent-2)/0.22); }
.cmt__vis--off { border-color: hsl(38 90% 55% / 0.6); background: hsl(38 90% 55% / 0.14); color: hsl(38 90% 62%); }
.cmt__vis-ic { display:inline-flex; }
.cmt__hidetag { font-family: var(--font-pixel); font-size:8px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background: hsl(210 8% 42%); padding:3px 7px; border-radius:5px; }
.cmt--hidden > .cmt__card > .cmt__head, .cmt--hidden > .cmt__card > .cmt__main > .cmt__body { opacity:.5; }
/* confirmation popup + toast (dependency-free) */
.cmt-pop { position:fixed; inset:0; z-index:9000; background:rgba(8,10,14,.6); display:grid; place-items:center; padding:20px; }
.cmt-pop__box { background: hsl(var(--background)); border:1px solid hsl(var(--foreground)/0.14); border-radius:16px; padding:22px; max-width:380px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.cmt-pop__t { font-family: var(--font-display); font-size:1.15rem; margin-bottom:8px; color: hsl(var(--foreground)); }
.cmt-pop__m { font-size:14px; line-height:1.55; color: hsl(var(--foreground)/0.72); margin-bottom:18px; }
.cmt-pop__btns { display:flex; justify-content:flex-end; gap:10px; }
.cmt-pop__btns button { font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:9px; cursor:pointer; border:1px solid hsl(var(--foreground)/0.16); background:transparent; color: hsl(var(--foreground)/0.8); }
.cmt-pop__yes { background: hsl(var(--accent-2)); border-color:transparent; color:#fff; }
.cmt-pop__yes.is-danger { background:#e23b5a; }
.cmt-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,16px); z-index:9100; background:#1c2330; color:#eaf0f7; border:1px solid rgba(255,255,255,.12); padding:11px 18px; border-radius:10px; font-size:13.5px; box-shadow:0 14px 40px rgba(0,0,0,.4); opacity:0; transition:opacity .3s, transform .3s; max-width:90vw; }
.cmt-toast.show { opacity:1; transform:translate(-50%,0); }
.cmt-toast.is-err { background:#3a1c22; border-color:rgba(255,120,140,.3); }
.cmt--staff > .cmt__card > .cmt__head .cmt__name { color: hsl(var(--accent-2)); }

/* ---- nested replies: indented column with a faint guide rail. Each reply is its
        own bordered card (.cmt__card), so threading reads from indentation + cards. ---- */
.cmt__kids { margin-left: 18px; padding-left: 16px; border-left: 1px solid hsl(var(--foreground)/0.08); }
.cmt.collapsed > .cmt__card > .cmt__main,
.cmt.collapsed > .cmt__kids { display:none; }

.cmt-reply { margin:6px 0 10px; }
.cmt-reply textarea { width:100%; background: hsl(var(--background)); border:1px solid hsl(var(--accent-2)/0.5); border-radius:10px; padding:10px; color: hsl(var(--foreground)); font-family:inherit; font-size:14px; resize:vertical; }
.cmt-reply__btns { display:flex; align-items:center; gap:8px; margin-top:8px; }
.cmt-reply .pb-btn { margin-top:0; padding:8px 16px; font-size:13px; cursor:pointer; }
.cmt-rcancel { font-size:13px; color: hsl(var(--foreground)/0.6); cursor:pointer; }
.cmt-rmsg { font-size:12px; } .cmt-rmsg.ok { color:#34c759; } .cmt-rmsg.err { color:#ff6a8a; }

/* ============================================================
   Reading hierarchy (task 98): only the COMMENT TEXT, the
   COMMENTATOR NAME and REPLY stand out. Everything else
   (time, role, report/flag, show/hide eye, reviewed/reported)
   is dimmed so the eye lands on what matters. A very subtle
   card + hairline border separates each top-level comment.
   ============================================================ */

/* 1) the three standouts */
.cmt__name { color: hsl(var(--foreground)); font-weight: 700; }
.cmt__body { color: hsl(var(--foreground)/0.96); }
.cmt__reply { color: hsl(var(--foreground)/0.85); font-weight: 600; }
.cmt__reply:hover { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }

/* 2) dim everything secondary; brighten on hover/focus so it stays usable */
.cmt__time,
.cmt__role { opacity: .5; transition: opacity .15s ease; }
/* "· N replies hidden" stays coloured so a collapsed thread is obvious.
   NOTE: on this theme --accent-2 is a hex colour, so use it directly (not hsl()). */
.cmt__cnote { opacity: 1; font-weight: 600; color: var(--accent-2);
  color: color-mix(in srgb, var(--accent-2), #fff 34%); }
.cmt__actions > :not(.cmt__reply) { opacity: .4; transition: opacity .15s ease; }
.cmt__card:hover .cmt__time,
.cmt__card:hover .cmt__role,
.cmt__card:hover .cmt__actions > :not(.cmt__reply),
.cmt__actions > :not(.cmt__reply):hover,
.cmt__actions > :not(.cmt__reply):focus-visible { opacity: 1; }

/* 3) a very subtle card + hairline border around EVERY comment (each comment
      individually — nested replies too — not the overall thread). The card wraps
      only the comment's own head + body + actions; its replies sit below it. */
.cmt__card {
  background: hsl(var(--foreground)/0.025);
  border: 1px solid hsl(var(--foreground)/0.09);
  border-radius: 13px;
  padding: 12px 15px 9px;
  transition: border-color .15s ease, filter .15s ease;
}
/* subtle hover feedback that works on both the neutral and the navy cards */
.cmt__card:hover { filter: brightness(1.12); border-color: hsl(var(--foreground)/0.18); }

/* ---- thread grouping by colour: each TOP-LEVEL thread gets its own accent
        colour, inherited by ALL of its replies (via the --group-color custom
        property). Only a left accent bar is coloured — NO card background tint —
        and the colour rotates per thread so adjacent groups are easy to tell
        apart. ---- */
#cmtList > .cmt:nth-child(6n+1) { --group-color: #FF2E97; } /* pink   */
#cmtList > .cmt:nth-child(6n+2) { --group-color: #8B5CFF; } /* purple */
#cmtList > .cmt:nth-child(6n+3) { --group-color: #19D3DA; } /* teal   */
#cmtList > .cmt:nth-child(6n+4) { --group-color: #FF9F1C; } /* amber  */
#cmtList > .cmt:nth-child(6n+5) { --group-color: #2F9BFF; } /* blue   */
#cmtList > .cmt:nth-child(6n+6) { --group-color: #36D38A; } /* green  */
/* coloured left bar on every card in the group (background stays neutral) */
.cmt__card { border-left: 3px solid hsl(var(--foreground)/0.14); }
/* the reply connector rail echoes the group colour, faintly */
.cmt__kids { border-left-color: hsl(var(--foreground)/0.1); }

/* circular avatars: always a perfect 1:1 circle, never oval (task 99) */
.cmt__av { aspect-ratio: 1 / 1; flex: none; }
.cmt__av img { aspect-ratio: 1 / 1; object-fit: cover; }