/* History. The year is the thing you are trying to learn, so it is the thing that is big. */
.hi-card{padding:14px 16px;margin-bottom:10px}
.hi-year{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--blue-dark);background:var(--blue-bg);
  display:inline-block;padding:2px 10px;border-radius:999px;margin-bottom:6px;
}
.hi-title{font-size:17px;color:var(--text);line-height:1.3;margin-bottom:4px}
.hi-what{font-size:13px;color:var(--text-2);margin:0;line-height:1.45}
.hi-verdict{margin-top:8px;font-size:12px}
.hi-verdict.right{color:var(--green)}
.hi-verdict.wrong{color:var(--red)}

.hi-two{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:16px 0}
@media (min-width:640px){.hi-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hi-choice{
  -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;text-align:left;
  min-height:86px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--text);
  display:flex;align-items:center;
  transition:border-color var(--med) var(--ease),box-shadow var(--med) var(--ease);
}
.hi-choice:hover{border-color:var(--blue);box-shadow:var(--e1)}
.hi-choice-title{font-size:16px;line-height:1.35}
.hi-choice.done{cursor:default}
.hi-choice.good{border-color:var(--green);background:var(--green-bg)}
.hi-choice.bad{border-color:var(--red);background:var(--red-bg)}
.order-tile.picked{opacity:.45}