/* Reading test on « Le Hollandais sans peine ». Loaded after clock-exercise.css, imparfait-exercise.css and phrases-exercise.css, whose choices, line
   and keyboard it reuses. */
.hsp-exercise .hsp-display{font-size:22px}
.hsp-exercise .hsp-display--long{font-size:19px;line-height:1.5}
/* Steps to touch in order: the rank appears in a round badge. */
.hsp-order{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.hsp-order-list{grid-template-columns:1fr}
.hsp-order-item{display:flex;align-items:center;gap:12px;text-align:left}
.hsp-order-rank{flex:0 0 34px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:2px solid #4f61ff;border-radius:50%;background:#fff;color:#034cff;font:800 18px Inter,sans-serif}
.hsp-order-item[aria-pressed="true"] .hsp-order-rank{background:#034cff;color:#fff}
.hsp-order-reset{align-self:flex-start}
/* « Relie » of the class sheet: one row per character, one pair of choices per column. */
.hsp-link{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.hsp-link-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:10px;align-items:center;padding:12px;border-radius:16px;background:#f2f5ff}
.hsp-link-name{font:800 19px Inter,sans-serif;color:#101052}
.hsp-link-column{display:flex;flex-direction:column;gap:8px}
.hsp-link-choice{font-size:17px}
@media(max-width:700px){
 .hsp-exercise .hsp-display{font-size:19px}
 .hsp-exercise .hsp-display--long{font-size:17px}
 .hsp-link-row{grid-template-columns:1fr 1fr}
 .hsp-link-name{grid-column:1 / -1}
}