/* Zirva – pass 15: optical centring.
   1. Shapes with a 3D floor centre their content on the visible face, not the whole box
      (padding-bottom = floor height, so the icon moves up by half of it).
   2. Phosphor glyphs whose ink is not centred in their em box get a measured nudge.
      `translate` composes with any transform animation on the same icon. */

/* 1. centre on the face */
.pn.done,.pn.lock,.pn-in{padding-bottom:6px}
.medal{padding-bottom:6px}
.cb-disc,.ud-seal{padding-bottom:8px}
.ph-top .n{padding-bottom:4px}
.duo-t .ic,.nl .ic,.gx-unit .ic,.cb-dots i,.scores button{padding-bottom:3px}
.btn-primary,.btn-ok,.btn-no{padding-bottom:4px}
.btn-primary:active,.btn-ok:active,.btn-no:active{padding-bottom:2px}
.scores button[aria-pressed="true"]{padding-bottom:4px}

/* 2. glyph ink nudges (measured from the font, in em) */
.ph-bold.ph-check{translate:-.016em -.034em}
.ph-fill.ph-star{translate:0 .013em}
.ph-fill.ph-lock-simple{translate:0 .044em}
.ph-fill.ph-trophy{translate:0 -.034em}
.ph-bold.ph-path{translate:0 -.049em}
.ph-fill.ph-users-three{translate:0 -.034em}
.ph-fill.ph-paper-plane-tilt{translate:.031em -.034em}
.ph-fill.ph-push-pin{translate:-.031em .029em}
.ph-bold.ph-paper-plane-right{translate:-.047em 0}
.ph-bold.ph-chart-bar,.ph-fill.ph-user{translate:0 .013em}

/* the path's "done" node must not inherit the old submitted-screen .done layout (app5) */
.pn.done{padding:0 0 6px;margin:0;max-width:none;text-align:center}

/* pass 16: in-place feedback */
.week2.tap{cursor:pointer;transition:transform 120ms var(--ease-out)}
.week2.tap:active{transform:scale(.98)}
.is-done{background:var(--color-success-tint)!important;color:var(--color-success)!important;box-shadow:none!important;animation:pop 320ms var(--ease-spring) both}
a.is-done{background:none!important}
.is-done i{margin-right:6px}
.btn-icon.is-done i,.btn-sm[aria-label].is-done i{margin-right:0}
.why-x{margin:10px 0 2px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.7);font:var(--type-body-sm);color:var(--color-text);animation:rise2 300ms var(--ease-out) both}
.why[aria-expanded="true"]{opacity:.5}
.stepper b.bump,.bump{animation:bump 260ms var(--ease-spring)}
@media (prefers-reduced-motion:reduce){.is-done,.why-x,.stepper b.bump{animation:none}}
/* login email step */
.lg-field{display:flex;align-items:center;gap:10px;min-height:56px;margin-top:24px;padding:0 16px;border-radius:14px;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-text)}
.lg-field i{font-size:20px;color:var(--color-text-secondary)}
.lg-field input{flex:1;min-width:0;border:0;background:none;font:var(--type-body-lg);color:var(--color-text);outline:none}
.lg-note{display:flex;align-items:center;gap:8px;margin-top:14px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.lg-note i{font-size:18px}
/* matching: a wrong pair flashes red once (no shaking) */
.mt.bad{background:var(--color-danger-tint)!important;box-shadow:inset 0 0 0 2px var(--color-danger)!important;color:var(--color-danger)!important}
.lg-field input{align-self:stretch;min-height:52px}

/* no visible scrollbars anywhere; scrolling still works (wheel, touch, keyboard) */
*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none;width:0;height:0}

/* learning path: the road between lessons */
.path{position:relative;gap:14px}
.path>.pn,.path>.path-unit{position:relative;z-index:1}
.path svg.road{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
.road-done{fill:none;stroke:var(--color-success);stroke-width:12;stroke-linecap:round;opacity:.9}
.road-done.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 700ms var(--ease-out) 250ms forwards}
.road-next{fill:none;stroke:var(--color-border-strong);stroke-width:8;stroke-linecap:round;stroke-dasharray:0 18}
.road-next.fadein{animation:fade 400ms ease 700ms both}
.pn.now::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:50%;background:var(--color-canvas)}
.path-unit{background:var(--color-canvas);padding:0 4px}
@media (prefers-reduced-motion:reduce){.road-done.draw{animation:none;stroke-dashoffset:0}.road-next.fadein{animation:none}}
