/* ============================================================
   Threaded comments.

   The old list had no hierarchy in the document: replies sat beside their
   parent and were pushed over with margin-left, so nothing could be drawn
   joining them. They nest now, and these rules draw the join.

   HOW THE LINE IS BUILT, because it is the part that looks like magic and
   is not. There is no single long rail. A rail that ran to the bottom of a
   branch would always overshoot the last reply, and CSS cannot know how tall
   that last reply is.

   So it is drawn in three pieces that meet exactly:

     1. the parent's row draws a line from under its own face to its bottom
     2. every child draws an elbow: down a little, then a curve into its face
     3. every child EXCEPT THE LAST carries the line on to its own bottom,
        where the next child's elbow picks it up

   The last child draws only the elbow, so the line ends on the curve into
   the last face, which is exactly where a reader expects a thread to stop.

   Sizes live in one place at the top. The whole thing is driven by where the
   centre of a face sits, so changing the avatar size moves the rail with it.
   ============================================================ */

.cmt-list,
.cmt-kids {
  --cmt-face: 32px;                      /* avatar */
  --cmt-rail: 15px;                      /* centre of the face, where the line runs */
  --cmt-ind: 30px;                       /* how far a reply steps in */
  --cmt-elbow: 17px;                     /* down this far before the curve */
  --cmt-line: var(--border, #e5e7eb);
}

.cmt-list { list-style: none; margin: 0; padding: 0; }

.cmt-kids {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--cmt-ind);
}

.cmt { position: relative; }

/* ── the row: a face, and everything said ─────────────────── */

.cmt-row {
  position: relative;
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
}

/* 1. from under this face down to the first reply */
.cmt.has-kids > .cmt-row::before {
  content: '';
  position: absolute;
  left: calc(var(--cmt-rail) - 1px);
  top: calc(var(--cmt-face) + 4px);
  bottom: 0;
  width: 2px;
  background: var(--cmt-line);
  border-radius: 2px;
}

/* 2. the elbow into each reply */
.cmt-kids > .cmt::before {
  content: '';
  position: absolute;
  left: calc(0px - var(--cmt-ind) + var(--cmt-rail) - 1px);
  top: 0;
  width: calc(var(--cmt-ind) - var(--cmt-rail) + 1px);
  height: var(--cmt-elbow);
  border-left: 2px solid var(--cmt-line);
  border-bottom: 2px solid var(--cmt-line);
  border-bottom-left-radius: 12px;
}

/* 3. and on down to the next one, for everybody but the last */
.cmt-kids > .cmt:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(0px - var(--cmt-ind) + var(--cmt-rail) - 1px);
  top: var(--cmt-elbow);
  bottom: 0;
  width: 2px;
  background: var(--cmt-line);
}

/* ── the fold handle ──────────────────────────────────────── */
/*
   A transparent button lying over the line for the whole height of the
   branch. Clicking a thread shut is a 16px wide and arbitrarily tall target
   instead of a chevron, which is the difference between working and not on a
   phone. The line lights up under the finger so it is clear what will close.
*/
.cmt-rail {
  position: absolute;
  left: calc(var(--cmt-rail) - 8px);
  top: calc(var(--cmt-face) + 4px);
  bottom: 0;
  width: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.cmt:has(> .cmt-rail:hover) > .cmt-row::before,
.cmt:has(> .cmt-rail:focus-visible) > .cmt-row::before { background: var(--primary, #00bcd4); }
.cmt-rail:hover ~ .cmt-kids > .cmt::before,
.cmt-rail:focus-visible ~ .cmt-kids > .cmt::before { border-color: var(--primary, #00bcd4); }
.cmt-rail:hover ~ .cmt-kids > .cmt::after,
.cmt-rail:focus-visible ~ .cmt-kids > .cmt::after { background: var(--primary, #00bcd4); }
.cmt-rail:focus-visible { outline: 2px solid var(--primary, #00bcd4); outline-offset: 2px; border-radius: 8px; }

/* ── faces and words ──────────────────────────────────────── */

.cmt-ava {
  width: var(--cmt-face); height: var(--cmt-face);
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary, #00bcd4), #0ea5e9);
  color: #04212b;
  font-weight: 800; font-size: .82rem;
  text-decoration: none;
}
.cmt-ava-sm { --cmt-face: 26px; width: 26px; height: 26px; font-size: .72rem; }

.cmt-main { flex: 1; min-width: 0; }

.cmt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmt-name {
  font-weight: 700; font-size: .85rem; color: var(--text, #0f172a); text-decoration: none;
}
.cmt-name:hover { color: var(--primary, #00bcd4); }
.cmt-time { font-size: .72rem; color: var(--text-muted, #64748b); }

/* Past the indent cap the relationship is said in words instead. */
.cmt-to {
  font-size: .7rem; color: var(--primary, #00bcd4);
  background: rgba(0,188,212,.1);
  padding: 1px 8px; border-radius: 50px; white-space: nowrap;
}
.cmt-to i { font-size: .62rem; }

.cmt-body {
  font-size: .88rem; line-height: 1.6; color: var(--text, #0f172a);
  margin: 3px 0 0; overflow-wrap: break-word;
}
.cmt-body.is-clipped {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cmt-more {
  background: none; border: 0; padding: 2px 0;
  color: var(--primary, #00bcd4); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}

/* ── what you can do ──────────────────────────────────────── */

.cmt-acts { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.cmt-act {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; border-radius: 8px;
  padding: 5px 8px;
  color: var(--text-muted, #64748b);
  font: inherit; font-size: .76rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: color .15s, background .15s;
}
.cmt-act:hover { color: var(--primary, #00bcd4); background: rgba(0,188,212,.08); }
.cmt-like.is-on { color: #ef4444; }
.cmt-like.is-on i { transform: scale(1.1); }
.cmt-like i { transition: transform .15s; }
.cmt-dm { margin-left: auto; }

/*
 * Remove. Quiet until pointed at, then red, because it is the one action
 * here that cannot be taken back. It sits at the far right with the message
 * button, away from Like and Reply, so a thumb reaching for Reply does not
 * find it. The rule for whichever of the two is first on the row carries the
 * auto margin; the second just follows it.
 */
.cmt-del { margin-left: auto; }
.cmt-dm + .cmt-del { margin-left: 0; }
.cmt-del:hover { color: #ef4444; background: rgba(239, 68, 68, .09); }
.cmt-del:disabled { opacity: .45; cursor: default; }

/* ── the fold toggle ──────────────────────────────────────── */
/*
 * One control, always there, saying what it will do.
 *
 * Opening was obvious, because a chip reading "9 replies" is plainly a
 * thing to press. Closing again was not: the only way back was the rail,
 * and a line you have to guess is clickable is a line most people never
 * click.
 */
.cmt.is-folded > .cmt-kids,
.cmt.is-folded > .cmt-rest,
.cmt.is-folded > .cmt-rail,
.cmt.is-folded > .cmt-row::before { display: none; }

.cmt-toggle,
.cmt-rest {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px var(--cmt-ind);
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 50px;
  background: var(--surface, #fff);
  color: var(--text-muted, #64748b);
  font: inherit; font-size: .76rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cmt-rest { padding-left: 12px; }
.cmt-toggle:hover,
.cmt-rest:hover { border-color: var(--primary, #00bcd4); color: var(--primary, #00bcd4); }
/* The chevron points at what happens: down to open, up to close. */
.cmt-toggle i { font-size: .62rem; transition: transform .2s; }
.cmt:not(.is-folded) > .cmt-toggle i { transform: rotate(180deg); }
.cmt:not(.is-folded) > .cmt-toggle { margin-bottom: 6px; }
.cmt-rest i { font-size: .62rem; }

.cmt-faces { display: inline-flex; }
.cmt-faces[hidden] { display: none; }
.cmt-face {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary, #00bcd4), #0ea5e9);
  color: #04212b; font-size: .6rem; font-weight: 800;
  border: 2px solid var(--surface, #fff);
  margin-right: -8px;
}
.cmt-face:last-child { margin-right: 0; }

/*
 * A long branch opens a few at a time.
 *
 * Hiding the overflow does not change which child is :last-child, so the
 * third one would still carry the line down to replies nobody can see.
 * Its continuation is cut as well, and the thread ends on the last face
 * actually on screen.
 */
.cmt-kids.is-capped > .cmt:nth-child(n+4) { display: none; }
.cmt-kids.is-capped > .cmt:nth-child(3)::after { display: none; }

/* ── the reply box ────────────────────────────────────────── */

/*
 * [hidden] is only display:none from the browser stylesheet, which any
 * explicit display in a real rule outranks. Without this line every reply
 * box on the page was open at once, because the element said hidden and the
 * flex said otherwise and the flex won.
 */
.cmt-form[hidden] { display: none; }
.cmt-form { display: flex; gap: 8px; margin: 8px 0 4px; }
.cmt-form-main { flex: 1; min-width: 0; }
.cmt-input {
  width: 100%; resize: none; overflow: hidden;
  padding: 9px 12px;
  border: 1.5px solid var(--border, #e5e7eb); border-radius: 14px;
  background: var(--surface-alt, #f4f6f9); color: var(--text, #0f172a);
  font: inherit; font-size: .85rem; line-height: 1.5; outline: none;
}
.cmt-input:focus { border-color: var(--primary, #00bcd4); background: var(--surface, #fff); }
.cmt-form-bar { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.cmt-send {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 50px;
  background: var(--primary, #00bcd4); color: #04212b;
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.cmt-send:disabled { opacity: .55; cursor: default; }

/* ── loading and empty ────────────────────────────────────── */

.cmt-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 2px; color: var(--text-muted, #64748b); font-size: .82rem;
}
.cmt-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border, #e5e7eb); border-top-color: var(--primary, #00bcd4);
  animation: cmt-spin .7s linear infinite;
}
@keyframes cmt-spin { to { transform: rotate(360deg); } }
.cmt-empty { padding: 14px 2px; color: var(--text-muted, #64748b); font-size: .84rem; margin: 0; }

/* ── phones ───────────────────────────────────────────────── */
/*
   The indent comes down hard, because every step costs width from the text
   and a reply four levels deep on a 360px screen has to still be readable.
   The rail follows the face automatically, so only two numbers change.
*/
@media (max-width: 640px) {
  .cmt-list,
  .cmt-kids {
    --cmt-face: 28px;
    --cmt-rail: 13px;
    --cmt-ind: 22px;
    --cmt-elbow: 15px;
  }
  .cmt-body { font-size: .85rem; }
  .cmt-act { padding: 6px 7px; font-size: .74rem; }
  .cmt-row { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmt-like i, .cmt-act, .cmt-unfold { transition: none; }
  .cmt-spin { animation-duration: 2s; }
}