/* Zirva – emotional design + tactile buttons (loaded last) */

/* ---------- buttons: Duolingo-grade tactility, our palette ---------- */
.btn{border-radius:14px;font-weight:600;letter-spacing:.005em;transition:transform 90ms ease,box-shadow 90ms ease,background-color 120ms ease}
.btn-lg{--h:58px;font-size:17px}
.btn-primary{box-shadow:inset 0 -4px 0 rgba(0,0,0,.38)}
.btn-primary:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.38)}
.btn-secondary{box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 #D6D0C3}
.btn-secondary:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -2px 0 #D6D0C3}
.btn-ok,.btn-no{box-shadow:inset 0 -4px 0 rgba(0,0,0,.3)}
.btn-sm{border-radius:11px}
.btn-sm.btn-primary{box-shadow:inset 0 -3px 0 rgba(0,0,0,.38)}
.btn-sm.btn-secondary{box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -3px 0 #D6D0C3}
.ans{box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 #D6D0C3;border-radius:14px}
.tile{box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 #D6D0C3;border-radius:13px}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

/* ---------- quiz feedback ---------- */
.fb2 .fbsub{font:var(--type-body-md);margin-top:2px}
.fb2:not(.no) .fbsub{color:var(--color-success)}

/* ---------- results: peak-end ---------- */
.rs h1{margin-top:24px}
.rs .human{font:500 19px/27px var(--font-family-ui);margin-top:10px}
.rs .ctx{font:var(--type-body-sm);color:var(--color-text-tertiary);margin-top:6px}
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.bdg{border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--tone-b),inset 0 -4px 0 var(--tone-b);overflow:hidden;text-align:center}
.bdg span{display:block;padding:7px 4px;background:var(--tone-b);color:var(--tone-t);font:600 13px/16px var(--font-family-ui)}
.bdg b{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 4px 16px;font:600 20px/24px var(--font-family-ui);font-variant-numeric:tabular-nums}
.bdg b i{font-size:18px;color:var(--tone-i)}
.b-ok{--tone-b:#BFE3CB;--tone-t:#145A37;--tone-i:var(--color-success)}
.b-fast{--tone-b:#C9DAF6;--tone-t:#1A4A9C;--tone-i:var(--color-info)}
.b-up{--tone-b:#F5DD9A;--tone-t:#5E4500;--tone-i:#946E00}
.rs .strip10{margin-top:28px}

/* ---------- student home: the week, gently ---------- */
.week2{margin-top:14px;background:var(--color-surface);border-radius:16px;box-shadow:inset 0 0 0 1px var(--color-border);padding:16px 16px 14px}
.w2-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.w2-top b{font:600 16px/22px var(--font-family-ui)}
.w2-top span{font:var(--type-body-sm);color:var(--color-text-secondary);white-space:nowrap}
.w2-days{display:grid;grid-template-columns:repeat(7,1fr);margin-top:14px;text-align:center}
.w2-days .dd{width:32px;height:32px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:var(--color-surface-sunken)}
.w2-days .dd.on{background:var(--color-text);color:var(--color-text-inverse)}
.w2-days .dd.now{background:var(--color-accent);color:var(--color-on-accent);box-shadow:0 0 0 3px var(--color-accent-tint)}
.w2-days .dd i{font-size:15px}
.w2-days small{display:block;margin-top:6px;font:var(--type-caption);color:var(--color-text-tertiary)}

/* ---------- homework submitted ---------- */
.done{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:520px;margin:0 auto;padding:0 24px}
.done .ok-ic{width:96px;height:96px;border-radius:50%;background:var(--color-success-tint);color:var(--color-success);display:grid;place-items:center;margin-top:auto;box-shadow:0 0 0 10px rgba(28,113,70,.06)}
.done .ok-ic i{font-size:52px}
.done h1{font:600 32px/38px var(--font-family-display);letter-spacing:-.02em;margin-top:28px}
.done p{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:10px;max-width:34ch}
.done .week2{width:100%;margin-top:32px;margin-bottom:auto;text-align:left}
.done-foot{width:100%;max-width:520px;margin:0 auto;padding:16px 24px 32px;display:flex;flex-direction:column;gap:14px;align-items:center}

.rs-foot.stack{flex-direction:column;gap:12px}
@media (min-width:900px){.rs-foot.stack{flex-direction:row-reverse}.rs-foot.stack .btn{flex:1}}