/* =====================================================================
   Talbot Hill — Comment system styles (shared)
   Linked from index.html and archive.html. Works inside a feed post
   card (.post-card) and inside the lightbox info panel.
   All classes are prefixed `thc-` to avoid colliding with site styles.
   Palette matches the site: #304236 card, #25302a insets, #8b7e5a tan,
   #5a6b54 green borders, #c4b896/#e8dcc7 text.
   ===================================================================== */

.thc {
  margin-top: 14px;
  border-top: 2px dashed #5a6b54;
  padding-top: 12px;
}

.thc-head {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #c4b896;
  letter-spacing: 1px;
  margin: 0 0 12px;
}

.thc-count { color: #8b7e5a; }

.thc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.thc-comment {
  background: #25302a;
  border: 1px solid #5a6b54;
  padding: 10px 12px;
  border-radius: 3px;
}

.thc-comment .who {
  color: #e8dcc7;
  font-weight: bold;
  font-size: 12px;
  margin: 0;
}

.thc-comment .who .anon { color: #a89e86; font-style: italic; font-weight: normal; }

.thc-comment .when {
  color: #8a7e6a;
  font-size: 10px;
  margin: 1px 0 6px;
}

.thc-comment .text {
  color: #c4b896;
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.thc-empty {
  color: #8a7e6a;
  font-size: 11px;
  font-style: italic;
  margin: 0 0 12px;
}

/* ---- the form ---- */
.thc-form { display: flex; flex-direction: column; gap: 8px; }

.thc-row { display: flex; gap: 8px; }

.thc-name,
.thc-body {
  background: #1d271f;
  border: 1px solid #5a6b54;
  color: #d8c9a0;
  font-family: 'Courier Prime', 'Georgia', serif;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 3px;
}
.thc-name:focus,
.thc-body:focus { border-color: #8b7e5a; outline: none; }
.thc-name::placeholder,
.thc-body::placeholder { color: #6b7e64; }

.thc-name { flex: 1; min-width: 0; }
.thc-body { min-height: 72px; width: 100%; resize: vertical; }

.thc-foot { display: flex; align-items: center; gap: 10px; }

.thc-submit {
  background: #8b7e5a;
  color: #2a3b2e;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 10px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 1px;
}
.thc-submit:hover { background: #a89e70; }
.thc-submit:disabled { background: #5a6b54; color: #2a3b2e; cursor: wait; }

.thc-hint {
  color: #8a7e6a;
  font-size: 10px;
  flex: 1;
}

.thc-msg { font-size: 11px; margin: 8px 0 0; min-height: 14px; }
.thc-msg.ok    { color: #a8d8a0; }
.thc-msg.err   { color: #d8a0a0; }
.thc-msg.info  { color: #e8dcc7; }

@media (max-width: 768px) {
  .thc-row { flex-direction: column; }
  .thc-name { width: 100%; }
  .thc-foot { flex-direction: column; align-items: stretch; }
  .thc-submit { align-self: flex-start; }
}