/* comments.css — the thread under a magazine article.

   Deliberately plain and sized below the body text it follows. A comment
   section that competes with the article for attention is one people scroll
   past.

   COLOURS COME FROM mag.css, NOT FROM THE SHELL. The article is a deliberately
   dark column whatever skin the site is wearing, and mag.css keeps its own
   tokens for exactly that reason: --mg-dim, --mg-line, --mg-gold. I reached for
   the shell's --muted and --line instead, which are set for the PAPER ground -
   ink on ink - so «هنوز دیدگاهی نیست» and the sign-in line came out almost
   invisible and the button lost its gold.

   Anything drawn inside .magpost has to use the article's tokens. */
.cmsec { margin: 46px 0 10px; padding-top: 26px;
         border-top: 1px solid var(--mg-line, rgba(255,255,255,.18)); }
.cmh { font-size: 1.08rem; font-weight: 800; margin: 0 0 18px; color: #fff; }
.cmh .cmn { font-size: .8rem; font-weight: 600; color: var(--mg-dim, rgba(255,255,255,.62)); margin-inline-start: 6px; }

.cmempty { color: var(--mg-dim, rgba(255,255,255,.62)); font-size: .88rem; padding: 6px 0 14px; }

.cmrow { display: flex; gap: 11px; padding: 12px 0; }
.cmrow + .cmrow { border-top: 1px solid var(--mg-line, rgba(255,255,255,.10)); }
/* an initial, not an avatar: we hold no pictures for members, and the same grey
   silhouette repeated down a page says less than a letter does */
.cmav { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--mg-gold, #e7c873); color: #1a1a1a;
        font-weight: 800; font-size: .9rem; }
.cmbody { min-width: 0; flex: 1; }
.cmhead { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cmwho { font-size: .86rem; font-weight: 700; color: #fff; }
.cmwhen { font-size: .74rem; color: var(--mg-dim, rgba(255,255,255,.62)); }
.cmtext { margin-top: 5px; color: #f2f0ec; font-size: .9rem; line-height: 1.95; overflow-wrap: anywhere; }

.cmreply { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
           font: inherit; font-size: .76rem; color: var(--mg-dim, rgba(255,255,255,.62)); }
.cmreply:hover { text-decoration: underline; text-underline-offset: 3px; }

/* one level of nesting only. A third column is unreadable on a phone, so a
   reply to a reply joins the same thread instead of indenting again. */
.cmkids { margin-top: 8px; padding-inline-start: 14px;
          border-inline-start: 2px solid var(--mg-line, rgba(255,255,255,.14)); }
.cmkids .cmrow { padding: 10px 0; }
.cmkids .cmav { width: 26px; height: 26px; font-size: .78rem; }

.cmform { margin-top: 20px; }
.cmreplying { font-size: .78rem; color: var(--mg-dim, rgba(255,255,255,.62)); margin-bottom: 7px; }
.cmreplying b { color: inherit; font-weight: 700; }
.cmcancel { border: 0; background: none; padding: 0 6px; cursor: pointer;
            font: inherit; font-size: .76rem; color: inherit; text-decoration: underline; }
.cmform textarea { width: 100%; box-sizing: border-box; resize: vertical;
                   font: inherit; font-size: .9rem; line-height: 1.9; padding: 11px 13px;
                   border-radius: 10px; border: 1px solid var(--mg-line, rgba(255,255,255,.18));
                   background: rgba(255,255,255,.06); color: #fff; }
.cmform textarea:focus { outline: none; border-color: var(--mg-gold, #e7c873); }

.cmactions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cmsend { border: 0; border-radius: 20px; padding: 8px 18px; cursor: pointer;
          font: inherit; font-weight: 800; font-size: .82rem;
          background: var(--mg-gold, #e7c873); color: #1a1a1a; }
.cmsend:disabled { opacity: .55; cursor: default; }
.cmmsg { font-size: .78rem; color: var(--mg-dim, rgba(255,255,255,.62)); }

.cmgate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
          margin-top: 18px; font-size: .88rem; color: var(--mg-dim, rgba(255,255,255,.62)); }

/* the textarea sits on the dark column too */
.cmform textarea::placeholder { color: rgba(255,255,255,.38); }
.cmcancel { color: var(--mg-gold, #e7c873); }