/* Same card vocabulary as the tutorial pages' .rel grid — a visitor moving between the two should
   not notice they changed page type. Duplicated rather than imported because gen_exercises.PAGE_CSS
   also carries the video-player rules, which have nothing to do with a listing. */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px;margin-top:16px}
.rel a{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .2s;display:block}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rel img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--bg-soft)}
.rel .n{padding:11px 13px;font-size:14px;font-weight:800;line-height:1.6}
.rel .m{padding:0 13px 12px;font-size:11.5px;color:var(--muted);font-weight:700}
.mistake{background:#fff;border:1px solid var(--line);border-inline-start:3px solid #f0a03c;
  border-radius:13px;padding:13px 16px;margin-bottom:9px}
.mistake b{display:block;font-size:15px;font-weight:800;margin-bottom:3px}
.mistake p{font-size:14px;color:var(--muted);margin:0}
.answer{font-size:16.5px;color:var(--text-2);line-height:2.05;margin-top:14px;max-width:760px}
.toolbox{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.toolbox .tx{flex:1;min-width:220px}
.toolbox h3{font-size:17px;font-weight:800}
.toolbox p{font-size:14px;color:var(--text-2);margin-top:4px;line-height:1.95}
.catlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:18px}
.catlist a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .2s}
.catlist a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.catlist h3{font-size:16.5px;font-weight:800}
.catlist p{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.9}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips a{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:13.5px;font-weight:800;color:var(--text-2)}
.chips a:hover{border-color:var(--green-3);color:var(--green-3)}
.catlist span{display:inline-block;margin-top:9px;font-size:12px;font-weight:800;color:var(--green-3)}
@media (max-width:520px){
  .rel{grid-template-columns:1fr 1fr;gap:10px}
  .rel .n{font-size:13px;padding:9px 11px}
  .rel .m{padding:0 11px 10px}
  .toolbox{padding:16px}
  .toolbox .btn{width:100%}
}
/* See theme.py — :hover latches after a tap on a touch screen, leaving the card lifted. */
@media (hover:none){
  .rel a:hover,.catlist a:hover{transform:none;box-shadow:var(--shadow)}
}