/* HARICODE canonical lesson grammar — v4.0.
   Layered on top of the v3.1 app without changing the 50 existing experiments. */

.grammar-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:1rem 0 .7rem;
  color:var(--muted);
  font-size:.57rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.grammar-strip span{
  border:1px solid var(--line);
  background:#fbfaf6;
  border-radius:999px;
  padding:.23rem .42rem;
}
.grammar-strip span+span::before{
  content:'→';
  margin-right:.35rem;
  color:#9aa5a2;
}

.prediction-block{
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  background:#f7faf8;
  padding:.8rem .9rem;
  margin:.75rem 0 1rem;
}
.prediction-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.45rem;
}
.prediction-head strong{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
}
.prediction-head span{
  color:var(--muted);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}
.prediction-prompt{
  margin:0 0 .55rem;
  color:#42565a;
  font-size:.76rem;
}
.prediction-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.5rem;
}
.prediction-input{
  width:100%;
  min-width:0;
  padding:.58rem .65rem;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  background:#fff;
  font-size:.75rem;
}
.prediction-input:disabled{
  background:#f0f2ef;
  color:#405356;
}
.prediction-status{
  margin:.4rem 0 0;
  color:var(--muted);
  font-size:.63rem;
}
.prediction-status.locked{color:var(--teal);font-weight:760}

.consequence-panel{
  display:none;
  margin:1rem 0 0;
  border-top:1px solid var(--line);
  padding-top:1rem;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:.75rem;
}
.consequence-panel.visible{display:grid}
.consequence-card,.surprise-card{
  border:1px solid var(--line);
  padding:.8rem .9rem;
  background:#fff;
}
.consequence-card span,.surprise-card span{
  display:block;
  color:var(--muted);
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
  margin-bottom:.25rem;
}
.consequence-card p,.surprise-card p{
  margin:0;
  color:#42565a;
  font-size:.74rem;
}
.surprise-card{
  background:var(--red-soft);
  border-color:#ead1c9;
}
.surprise-card span{color:var(--accent)}

.insight-drawer .surprise-insight{
  background:var(--red-soft);
}
.insight-drawer .surprise-insight h3{color:#8f352c}

@media (max-width:760px){
  .prediction-row{grid-template-columns:1fr}
  .consequence-panel.visible{grid-template-columns:1fr}
  .grammar-strip span+span::before{display:none}
}