/* HP ORD (mallar/test-hp-ord.php). Bygger på designsystemets .stage/.answers/.choice; laddas bara på /hogskoleprovet/ord/. */
.hp-lagen{margin-top:20px}
.hp-utmaning{margin:16px 0}
.hp-stage .stim.hp-stim{height:auto;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 8px}
.hp-fraga{margin:0;color:var(--stage-ink-2);font-size:15px}
.hp-stage .stim .word.hp-ord{font:700 clamp(24px,7.5vw,44px)/1.15 var(--font-serif);letter-spacing:-.01em;text-align:center;text-transform:none;max-width:100%;overflow-wrap:anywhere}
.answers.hp-alt{grid-template-columns:1fr;gap:8px}
.answers.hp-alt button{flex-direction:row;justify-content:flex-start;min-height:56px;padding:10px 16px 10px 40px;font:500 17px var(--font-sans);text-align:left}
.answers.hp-alt button kbd{top:50%;left:14px;transform:translateY(-50%)}
.answers.hp-alt button[aria-pressed="true"]{background:var(--brand-cyan);color:#04202A;border-color:var(--brand-cyan)}
.answers.hp-alt button[aria-pressed="true"] kbd{color:#04202A}
.answers.hp-alt button.ratt{border-color:#4CAF50;box-shadow:inset 0 0 0 2px #4CAF50}
.answers.hp-alt button.fel{border-color:#E85A5A;box-shadow:inset 0 0 0 2px #E85A5A}
.answers.hp-alt button:disabled{cursor:default}
.hp-klocka{font-variant-numeric:tabular-nums;font-weight:600}
.hp-klocka.lite-tid{color:#E3B93B}
.hp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
.hp-nav .btn-ghost{color:var(--stage-ink);background:none;border:1px solid var(--stage-line);border-radius:var(--r-2);min-height:44px;padding:0 14px;cursor:pointer}
.hp-nav .btn-ghost:disabled{opacity:.4;cursor:default}
.hp-punkter{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.hp-punkter button{width:32px;height:32px;border-radius:50%;border:1px solid var(--stage-line);background:var(--stage-2);color:var(--stage-ink-2);font:500 12px var(--font-mono);cursor:pointer}
.hp-punkter button.svarad{background:var(--stage-line);color:var(--stage-ink)}
.hp-punkter button.aktuell{outline:2px solid var(--brand-cyan);outline-offset:1px}
.hp-aterkoppling{margin-top:12px;padding:14px 16px;border-radius:var(--r-2);background:var(--stage-2);color:var(--stage-ink)}
.hp-aterkoppling p{margin:0 0 8px}
.hp-utfall{font-weight:600}
.hp-exempel{font-style:italic;color:var(--stage-ink-2)}
.hp-facit{padding-left:20px}
.hp-facit li{padding:10px 0;border-bottom:1px solid var(--line)}
.hp-facit li p{margin:0 0 4px}
.hp-facit .hp-exempel{color:var(--ink-3)}
.hp-facit li.fel .tag{border-color:var(--error);color:var(--error)}
.hp-facit li.ratt .tag{border-color:var(--success);color:var(--success)}
.hp-dela{margin:28px 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-3)}
.hp-dela-rad{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.hp-dela-rad .input{flex:1;min-width:160px}
@media (max-width:520px){.hp-nav{justify-content:center}.hp-punkter{order:-1;width:100%}}
.hp-stage .stage-foot{flex-wrap:wrap;gap:8px}
.hp-stage .stage-foot .btn-start{min-height:40px;padding:0 16px}

/* 2026-10-25: [hidden] gäller även element som har display i den här filen (navigeringen syntes i träningen – orsaken till fel "rätt svar") */
.hp-stage [hidden],.hp-modal[hidden]{display:none!important}
/* Fast höjd: ordet och alternativen hoppar inte när orden är olika långa */
.hp-stage .stim.hp-stim{height:160px;min-height:0;overflow:hidden}
.answers.hp-alt button{height:60px;min-height:0;overflow:hidden}
.answers.hp-alt button span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
/* Återkopplingen: på desktop i sidan med reserverad höjd (inget hopp), under 700 px i en modal */
.hp-aterkoppling{display:none}
.hp-traning .hp-aterkoppling{display:block;height:220px;overflow:auto;visibility:hidden}
.hp-traning .hp-aterkoppling.visas{visibility:visible}
@media (max-width:700px){.hp-traning .hp-aterkoppling{display:none}}
.hp-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,10,18,.72)}
.hp-modal-ruta{width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:var(--r-3);padding:22px 20px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.hp-modal-ruta h2{margin:0 0 10px;font-size:22px}
.hp-modal-ruta p{margin:0 0 10px}
.hp-modal-ruta .hp-exempel{color:var(--ink-3)}
html.hp-modal-oppen{overflow:hidden}

/* Felmeddelande i testytan (nätverksfel) med "Försök igen" */
.hp-stage-fel{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-2);background:#3a1d1d;color:#ffd9d9;font-size:15px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hp-stage-fel .btn{min-height:40px;padding:0 14px}