/* v5.34.10: "How it runs" on assessment detail pages. Loaded by views/partials/moddetail.ejs,
   after app.css, so these rules replace the older .mdbar / .mdlegend ones. */
.mdbar { margin: 4px 0 14px; }
.mdbar span { min-width: 28px; }
.mdbar span.practice { background: repeating-linear-gradient(135deg, #94a3b8 0 6px, #a8b4c6 6px 12px); }
/* legend as aligned tiles; long names wrap, the count stays on the right */
.mdlegend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px 10px; }
.mdlegend li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--h) 22%, transparent); border-left: 5px solid var(--h); background: color-mix(in srgb, var(--h) 7%, transparent); font-size: 0.92rem; line-height: 1.3; }
.mdlegend li b { font-weight: 700; overflow-wrap: anywhere; }
.mdlegend li .mdleg-n { white-space: nowrap; font-size: 0.8rem; font-weight: 700; color: var(--h); padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--h) 14%, transparent); }
.mdlegend li.practice { border-style: dashed; border-left-style: solid; }
.mdlegend li.practice .mdleg-n { color: #475569; }
.mdlegend li small { grid-column: 1 / -1; color: var(--muted); font-size: 0.78rem; }
:where([data-theme="dark"]) .mdlegend li .mdleg-n { color: color-mix(in srgb, var(--h) 60%, white); }
:where([data-theme="dark"]) .mdlegend li.practice .mdleg-n { color: #cbd5e1; }