/* spec 044-website-truth-features — truth-ledger, correction
   report, and article-like components. Loaded only by the blog
   article template and the /corrections/ page (the spec 037
   component-sheet pattern). Values mirror the approved
   wireframes (WF-04 revised, WF-24) on the site's brand tokens:
   navy #081F32, panel #0d2c47, cyan #00DEF6, ink #F7FCFF. */

/* Truth-ledger panel (wireframe .ledger) */
.truth-ledger {
  border: 1px solid rgba(0, 222, 246, .16);
  border-radius: 14px;
  background: #0d2c47;
  padding: 20px 22px;
  margin: 34px 0 26px;
}
.truth-ledger .tl-title {
  margin: 0 0 12px;
  font-size: 19px;
  color: #F7FCFF;
}
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item {
  padding: 10px 0;
  border-top: 1px solid rgba(247, 252, 255, .08);
  color: rgba(247, 252, 255, .72);
  font-size: 15px;
}
.tl-item:first-child { border-top: none; padding-top: 2px; }
.tl-date { color: #F7FCFF; font-weight: 600; }
.tl-src { color: #00DEF6; font-size: 13.5px; white-space: nowrap; }
.tl-empty { color: rgba(247, 252, 255, .72); margin: 0; font-size: 15px; }

/* Engagement row (wireframe .engage) */
.engage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid rgba(0, 222, 246, .16);
  border-radius: 999px;
  color: #F7FCFF;
  font: inherit;
  font-size: 15px;
  padding: 8px 16px;
  cursor: pointer;
  min-width: 118px;
}
.like-btn svg { width: 19px; height: 19px; flex: none; }
.like-btn .count {
  font-variant-numeric: tabular-nums;
  color: rgba(247, 252, 255, .72);
  min-width: 2ch;
  text-align: right;
}
.like-btn:hover { border-color: #00DEF6; }
.like-btn.liked { border-color: #00DEF6; }
.like-btn.liked svg { fill: #00DEF6; }
.like-btn.liked .count { color: #F7FCFF; }
.like-btn[disabled] { opacity: .55; cursor: default; }
.limits-note {
  color: rgba(247, 252, 255, .5);
  font-size: 13.5px;
  margin: 0 0 26px;
}
.report-toggle {
  display: inline-block;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  background: none;
  color: #00DEF6;
  border: 1.5px solid #00DEF6;
}
.report-toggle[hidden] { display: none; }

/* Report form (wireframe .report-form) */
.report-panel { margin: 0 0 26px; }
.report-panel[hidden] { display: none; }
#correction-form {
  border: 1px solid rgba(0, 222, 246, .16);
  border-radius: 14px;
  background: #0d2c47;
  padding: 22px;
}
#correction-form[hidden] { display: none; }
#correction-form .rf-title { margin: 0 0 14px; font-size: 19px; color: #F7FCFF; }
.rfield { margin: 0 0 16px; }
.rfield label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 15px;
  color: #F7FCFF;
}
.rfield .opt { color: rgba(247, 252, 255, .5); font-weight: 400; }
.rfield input[type="text"],
.rfield input[type="email"],
.rfield textarea {
  width: 100%;
  box-sizing: border-box;
  background: #081F32;
  border: 1px solid rgba(0, 222, 246, .16);
  border-radius: 10px;
  color: #F7FCFF;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
}
.rfield textarea { min-height: 84px; resize: vertical; }
.rfield ::placeholder { color: rgba(247, 252, 255, .5); }
.rfield input:focus,
.rfield textarea:focus {
  outline: 2px solid #00DEF6;
  outline-offset: 1px;
}
.truth-form-note {
  color: rgba(247, 252, 255, .72);
  font-size: 14px;
  margin: 0 0 16px;
}
.ts-box { margin: 0 0 16px; }
.hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.report-submit {
  display: inline-block;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  background: #00DEF6;
  color: #04222e;
  border: 1.5px solid #00DEF6;
}
.report-submit[disabled] { opacity: .55; cursor: default; }

/* Success / error (wireframe .success-box / .error-box) */
.form-ok {
  border: 1px solid #00DEF6;
  border-radius: 14px;
  background: rgba(0, 222, 246, .07);
  padding: 20px 22px;
  margin: 0 0 26px;
}
.form-ok h3 { margin: 0 0 8px; font-size: 19px; color: #F7FCFF; }
.form-ok p { margin: 0; color: rgba(247, 252, 255, .72); font-size: 15px; }
.form-err {
  border: 1px solid rgba(255, 120, 120, .55);
  border-radius: 14px;
  background: rgba(255, 120, 120, .07);
  padding: 16px 20px;
  margin: 0 0 18px;
  color: #F7FCFF;
  font-size: 15px;
}
.form-err p { margin: 0; }
.form-err a { color: #00DEF6; }

/* /corrections/ what-happens panel (wireframe .what-happens) */
.what-happens {
  border: 1px solid rgba(0, 222, 246, .16);
  border-radius: 14px;
  background: #0d2c47;
  padding: 20px 22px;
  margin: 0 0 26px;
  text-align: left;
}
/* Issue #49 Phase 3 (2026-11-03): the /corrections/ panel heading
   is an h2 now (the page skipped h1 -> h3); same declarations. */
.what-happens h2 { margin: 0 0 10px; font-size: 19px; color: #F7FCFF; }
.what-happens p {
  color: rgba(247, 252, 255, .72);
  margin: 0 0 10px;
  font-size: 15.5px;
}
.what-happens p:last-child { margin-bottom: 0; }
.fallback-line { color: rgba(247, 252, 255, .72); font-size: 15px; margin: 18px 0 0; }
.fallback-line a { color: #00DEF6; }

/* Mobile (wireframe Frame B, 390px) */
@media (max-width: 640px) {
  .engage-row { flex-direction: column; align-items: stretch; }
  .like-btn { justify-content: center; }
  .report-toggle { text-align: center; width: 100%; }
  .truth-ledger, #correction-form { padding: 18px; }
}