{% block title %}Comprehension Check{% endblock %}
{% block content %}

<div class="card info-card">
  <div class="card__header">
    <h4>Realized Action</h4>
  </div>
  <div class="card__body">
    <p>Consider the following realized action of participant 1, not you, in your 5-person group:</p>
    <p><strong>Action:</strong> {{ tf_actions_text }}</p>
    <p><strong>Statement:</strong> {{ tf_statement }}</p>

    {{ form.cq_realized_action_tf }}
  </div>
</div>

<div class="next-wrap">
  {{ next_button }}
</div>

<style>

  /* Title bar — align with card content */
  .otree-title{
  max-width: 900px;
  margin: 6px auto 14px auto !important;

  /* match .card__header / .card__body horizontal padding */
  padding-left: 2px !important;
  padding-right: 2px !important;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: #111827;
  border: 0;
}

  .card{max-width:900px;margin:16px auto;border:1px solid #e5e7eb;border-radius:10px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.06)}
  .card__header{padding:14px 18px 10px 18px;border-bottom:1px solid #f0f2f5;background:#fafafa;border-radius:10px 10px 0 0}
  .card__subtitle{margin-top:4px;color:#6b7280;font-size:13px}
  .card__body{padding:16px 18px 18px 18px}
  .muted.small{color:#6b7280;font-size:12px}
  .next-wrap{max-width:900px;margin:10px auto 0;display:flex;justify-content:flex-end}
  .next-wrap .btn,.otree-btn-next,button[type="submit"].btn{border-radius:8px;padding:10px 18px;font-weight:600;border:1px solid #dbe2f3;background:linear-gradient(180deg,#f4f7ff 0%,#e9efff 100%);color:#1e3a8a;box-shadow:0 4px 10px rgba(30,91,255,.08);transition:transform .04s ease,box-shadow .15s ease,background .15s ease}
</style>
{% endblock %}