/* Motivate: progress box, live gauge, cheers, level pill, countdown and confetti (see js/motivate.js) */
.mv-sr,.mv-sr-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mv-panel h2 small{font-size:13px;font-weight:600;color:var(--muted)}
.mv-body{min-height:var(--mv-h,560px)}
.mv-body h3{font-size:16px;margin:18px 0 8px}
.mv-status{margin:0 0 14px;font-weight:700;font-size:15px;color:var(--ink-2)}
.mv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mv-tile{position:relative;background:var(--soft);border:2px solid var(--ink);border-radius:var(--r-sm);padding:10px 12px;min-height:118px;box-shadow:3px 3px 0 var(--ink)}
.mv-tile b{display:block;font-size:22px;line-height:1.25;font-variant-numeric:tabular-nums}
.mv-tile small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.mv-k{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mv-streak svg{position:absolute;right:10px;top:10px;width:30px;height:30px;fill:#ffd6a8;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;transform-origin:50% 90%;opacity:.45}
.mv-streak.on svg{fill:var(--sun);opacity:1;animation:mv-flick 1.6s ease-in-out infinite}
.mv-streak.on svg path+path{fill:#ff7a45}
@keyframes mv-flick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.08,1.12) rotate(3deg)}}
.mv-ring{position:absolute;right:8px;top:8px;width:40px;height:40px;transform:rotate(-90deg)}
.mv-ring circle{fill:none;stroke:#dfe3ee;stroke-width:6}
.mv-ring .mv-fill{stroke:var(--mint);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.mv-goals{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.mv-goals .chip{font-size:12px;padding:3px 8px;min-height:28px}
.mv-chart{margin-top:4px}
.mv-line{display:block;width:100%;height:110px;background:#fff;border:2px solid var(--ink);border-radius:var(--r-sm)}
.mv-line polyline{fill:none;stroke:var(--blue);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mv-line .mv-ax{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.mv-line .mv-dot{stroke:var(--ink);stroke-width:9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mv-line .mv-dot.mv-hi{stroke:var(--sun);stroke-width:12}
.mv-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.mv-trend{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.mv-empty{margin:0;min-height:110px;display:grid;place-items:center;text-align:center;padding:12px;border:2px dashed var(--line);border-radius:var(--r-sm);color:var(--muted);font-size:14px}
.mv-targets ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.mv-targets li{border:2px solid var(--ink);border-radius:var(--r-sm);padding:10px 12px;background:#fff}
.mv-targets li p{margin:0 0 6px;font-size:14px;line-height:1.45}
.mv-targets small{display:block;margin-top:4px;color:var(--muted);font-size:12.5px}
.mv-bar{display:block;height:10px;background:#e8ebf3;border:2px solid var(--ink);border-radius:var(--pill);overflow:hidden}
.mv-bar i{display:block;height:100%;background:var(--mint);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.mv-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mv-badges li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:var(--pill);padding:5px 12px 5px 8px;line-height:1.2}
.mv-badges svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.mv-badges .on{background:var(--sun);border:2px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mv-badges .on svg{fill:#fff}
.mv-badges .off{background:#fff;border:2px dashed #b9bfd0;color:var(--muted)}
.mv-badges .mv-new{animation:mv-pop .7s var(--ease) both}
@keyframes mv-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.mv-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:16px 0 0;font-size:13px;color:var(--muted)}
.mv-reset{background:none;border:0;padding:4px 0;font:700 13px var(--font);color:var(--blue-d);text-decoration:underline;cursor:pointer}
.mv-flash{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--blue-soft);padding:10px 14px;margin:0 0 14px;font-size:14.5px;box-shadow:3px 3px 0 var(--ink)}
.mv-flash.mv-best{background:#fff5e0;box-shadow:3px 3px 0 var(--sun)}
.mv-flash b{color:var(--ink)}
.mv-nb{display:block;margin-top:4px;font-weight:700}

/* level pill (always in the page, shown once filled: no layout shift) */
.mv-level{margin-left:auto;display:inline-block;min-width:9.5em;text-align:center;font-size:12.5px;font-weight:800;background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:var(--pill);padding:3px 10px;box-shadow:2px 2px 0 var(--ink);visibility:hidden;white-space:nowrap}
.mv-level.on{visibility:visible}
.mv-level.mv-up{animation:mv-lvl 1.2s var(--ease)}
@keyframes mv-lvl{0%{transform:scale(1)}25%{transform:scale(1.35) rotate(-4deg);background:var(--mint)}60%{transform:scale(.95) rotate(2deg)}100%{transform:scale(1)}}

/* live box while typing: fixed height */
.mv-live{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto;gap:4px 14px;height:124px;overflow:hidden;margin-bottom:12px;background:#fff;border:2px solid var(--ink);border-radius:var(--r-sm);padding:6px 12px}
.mv-gauge{grid-row:1/3;text-align:center;line-height:1;position:relative}
.mv-gauge svg{display:block;width:120px;height:70px;margin:0 auto;overflow:visible}
.mv-arc,.mv-arcf{fill:none;stroke-width:9;stroke-linecap:round}
.mv-arc{stroke:#e8ebf3}
.mv-arcf{stroke:var(--blue);transition:stroke-dasharray .3s linear}
.mv-needle{transform-box:view-box;transform-origin:60px 62px;transform:rotate(-90deg);transition:transform .3s var(--ease)}
.mv-needle line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.mv-gauge circle{fill:var(--ink)}
.mv-mb{stroke:var(--sun);stroke-width:4;stroke-linecap:round}
.mv-mt{stroke:var(--pink);stroke-width:4;stroke-dasharray:3 2}
.mv-gv{display:block;font-size:22px;font-variant-numeric:tabular-nums;margin-top:2px}
.mv-gl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mv-ahead svg{filter:drop-shadow(0 0 6px var(--mint))}
.mv-ahead .mv-arcf{stroke:var(--mint)}
.mv-bars{display:grid;gap:4px;align-content:start;padding-top:4px}
.mv-row{display:grid;grid-template-columns:62px minmax(0,1fr) 40px;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
.mv-row em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.mv-row .mv-bar{height:9px}
.mv-legend{margin:0;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-lb,.mv-lt{display:inline-block;width:10px;height:4px;border-radius:2px;background:var(--sun);vertical-align:middle;margin-right:4px}
.mv-lt{background:var(--pink)}
.mv-tipbox{position:relative;min-height:38px}
.mv-tip{margin:0;font-size:13px;line-height:1.4;color:var(--ink-2);transition:opacity .3s}
.mv-tip.mv-fade,.mv-cheering .mv-tip{opacity:0}
.mv-cheer{position:absolute;left:0;top:0;margin:0;max-width:100%;font-size:13.5px;font-weight:800;background:var(--mint);color:var(--ink);border:2px solid var(--ink);border-radius:var(--pill);padding:4px 12px;box-shadow:2px 2px 0 var(--ink);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;pointer-events:none}
.mv-cheer.show{opacity:1;transform:none}
.mv-cheer:empty{display:none}
.mv-float{position:fixed;left:50%;top:auto;bottom:18px;z-index:40;transform:translate(-50%,8px);max-width:calc(100vw - 32px)}
.mv-float.show{transform:translate(-50%,0)}
.mv-tipline{min-height:2.9em;margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}

/* question progress */
.mv-qprog{margin:0 0 12px}
.op-prog{flex-basis:100%;height:8px}
.op-quiz~.mv-panel,.mt-sheet~.mv-panel{margin-top:24px}

/* 3-2-1 countdown and confetti: fixed overlays, never move the page */
.mv-cd{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(15,18,34,.45);pointer-events:none}
.mv-cd b{font-size:min(28vw,150px);font-weight:800;color:#fff;-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--ink)}
.mv-cd .mv-pop{animation:mv-cd .7s var(--ease) both}
@keyframes mv-cd{0%{transform:scale(1.6);opacity:0}30%{opacity:1}100%{transform:scale(1)}}
.mv-confetti{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}
.mv-confetti i{position:absolute;top:-16px;width:9px;height:14px;border:1.5px solid var(--ink);border-radius:2px;animation:mv-fall 1.9s cubic-bezier(.25,.6,.45,1) forwards}
@keyframes mv-fall{to{transform:translate(var(--dx),105vh) rotate(var(--rot))}}

@media (max-width:620px){
  .mv-body{min-height:var(--mv-hm,820px)}
  .mv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv-tile{min-height:128px}
  .mv-live{grid-template-columns:118px minmax(0,1fr);height:156px;padding:6px 10px}
  .mv-gauge{grid-row:1}
  .mv-gauge svg{width:108px;height:63px}
  .mv-tipbox{grid-column:1/-1}
  .mv-row{grid-template-columns:52px minmax(0,1fr) 34px;gap:6px}
  .mv-level{min-width:9.6em;font-size:11.5px;padding:2px 8px}
}
@media (prefers-reduced-motion:reduce){
  .mv-streak.on svg,.mv-badges .mv-new,.mv-level.mv-up,.mv-cd .mv-pop{animation:none}
  .mv-needle,.mv-arcf,.mv-bar i,.mv-ring .mv-fill,.mv-tip,.mv-cheer{transition:none}
  .mv-confetti{display:none}
}